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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
vue中实现高德定位功能
Dec 03 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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python 动态加载的实现方法
2017/12/22 Python
Python多进程原理与用法分析
2018/08/21 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
浅析python连接数据库的重要事项
2021/02/22 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
简历里的自我评价范文
2014/02/24 职场文书
首席执行官观后感
2015/06/03 职场文书
房屋产权证明书
2015/06/19 职场文书
实验心得体会范文
2016/01/25 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL