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 表格插件整理
Apr 27 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 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+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
关于js类的定义
2011/06/28 Javascript
JS判定是否原生方法
2013/07/22 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
东方红海科技面试题软件测试方面
2012/02/08 面试题
大学生会计职业生涯规划范文
2014/02/28 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python