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 相关文章推荐
JS 控件事件小结
Oct 31 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
React简单介绍
May 24 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
JsRender实用入门教程
2014/10/31 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Vue2.0如何发布项目实战
2017/07/27 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
python在指定目录下查找gif文件的方法
2015/05/04 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
python RSA加密的示例
2020/12/09 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
高中微机老师自我鉴定
2014/02/16 职场文书
保护母亲河倡议书
2014/04/14 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2015年库房工作总结
2015/04/30 职场文书
标枪加油稿
2015/07/22 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python