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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
js获取变量
2006/08/24 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python新手学习标准库模块命名
2020/05/29 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
大学生标准自荐书
2014/06/15 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS