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新的绑定事件机制on方法的使用方法
Apr 15 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
JS作用域链详解
Jun 26 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 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替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
php json转换相关知识(小结)
2018/12/21 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
Python类定义和类继承详解
2015/05/08 Python
python实现的系统实用log类实例
2015/06/30 Python
python计算文本文件行数的方法
2015/07/06 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
Django 视图层(view)的使用
2018/11/09 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
大学生学业生涯规划
2014/01/05 职场文书
大班幼儿评语大全
2014/04/30 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers