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动态改变多行文本框高度的方法
Sep 07 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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
8个出色的WordPress SEO插件收集
2011/02/26 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
使用PHP开发留言板功能
2019/11/19 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
详解Python中with语句的用法
2015/04/15 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
关于python 跨域处理方式详解
2020/03/28 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
什么是Rollback Segment
2013/04/22 面试题
数字天堂软件测试面试题
2012/12/23 面试题
教育学专业实习生的自我鉴定
2013/11/26 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
离婚协议书范本
2015/01/26 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书