jQuery实现每隔几条元素增加1条线的方法


Posted in Javascript onJune 27, 2016

本文实例讲述了jQuery实现每隔几条元素增加1条线的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery实现每隔几条元素增加1条线的方法

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery每隔10条加一条线</title>
<script language="JavaScript" src="jquery-1.7.2.min.js"></script>
<script language="JavaScript" type="text/JavaScript"> 
 $(document).ready(function(){
  $(".list2 li:nth-child(10n)").after('<li style="margin:10px 0px;border-bottom:1px dashed #ccc;"></li>');
});
 </script>
  </head>
  <body>
    <style>
    li{ list-style-type: none;}
    </style>
    <ul class="list2">
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
        <li>005</li>
        <li>006</li>
        <li>007</li>
        <li>008</li>
        <li>009</li>
        <li>010</li>
        <li>011</li>
        <li>012</li>
        <li>013</li>
        <li>014</li>
        <li>015</li>
        <li>016</li>
        <li>017</li>
        <li>018</li>
        <li>019</li>
        <li>020</li>
        <li>021</li>
        <li>022</li>
        <li>023</li>
        <li>024</li>
        <li>025</li>
        <li>026</li>
        <li>027</li>
        <li>028</li>
        <li>029</li>
        <li>030</li>
        <li>031</li>
        <li>032</li>
    </ul>
  </body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 #Javascript
全面了解javascript三元运算符
Jun 27 #Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 #Javascript
使用vue.js制作分页组件
Jun 27 #Javascript
js编写一个简单的产品放大效果代码
Jun 27 #Javascript
用JS实现轮播图效果(二)
Jun 26 #Javascript
用JS实现图片轮播效果代码(一)
Jun 26 #Javascript
You might like
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP xpath()函数讲解
2019/02/11 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
Python标准库与第三方库详解
2014/07/22 Python
Python制作钉钉加密/解密工具
2016/12/07 Python
Python变量和数据类型详解
2017/02/15 Python
一道python走迷宫算法题
2018/01/22 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python实现智能语音天气预报
2019/12/02 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
三年大学生活自我鉴定
2014/01/21 职场文书
夜不归宿检讨书
2014/02/25 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python