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实现div层缓慢收缩与展开的方法
May 11 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
第九节 绑定 [9]
2006/10/09 PHP
资料注册后发信小技巧
2006/10/09 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Django单元测试工具test client使用详解
2019/08/02 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
自荐信的五个重要部分
2013/10/29 职场文书
亲子读书活动方案
2014/02/22 职场文书
销售总经理岗位职责
2014/03/15 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
Mysql开启外网访问
2022/05/15 MySQL