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 相关文章推荐
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
js命名空间写法示例
Dec 18 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
JS遍历树层级关系实现原理解析
Aug 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的简单采集数据入库程序【续篇】
2014/07/30 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
会计应届生的自荐信
2013/12/13 职场文书
网上书店创业计划书
2014/01/12 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
教师一帮一活动总结
2014/07/08 职场文书
人大代表选举标语
2014/10/07 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
搬迁通知
2015/04/20 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
mysql数据库如何转移到oracle
2022/12/24 MySQL