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 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
jQuery链使用指南
Jan 20 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
javascript实现Table排序的方法
May 15 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 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环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
php阳历转农历优化版
2016/08/08 PHP
php并发加锁示例
2016/10/17 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
PDO实现学生管理系统
2020/03/21 PHP
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
javascript每日必学之继承
2016/02/23 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python实战购物车项目的实现参考
2019/02/20 Python
python获取地震信息 微信实时推送
2019/06/18 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
上课睡觉检讨书300字
2014/11/18 职场文书
初中中等生评语
2014/12/29 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python