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 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
js css自定义分页效果
Feb 24 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 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
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP反射实际应用示例
2019/04/03 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
python实现windows下文件备份脚本
2018/05/27 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
上课迟到检讨书
2014/02/19 职场文书
优质服务演讲稿
2014/05/14 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
端午节活动总结
2014/08/26 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL
一文搞懂Java中的注解和反射
2022/06/21 Java/Android