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,超强推荐base.js
Dec 23 Javascript
Javascript miscellanea -display data real time, using window.status
Jan 09 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
js实现加载更多功能实例
Oct 27 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
微信小程序实现菜单左右联动
May 19 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
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操作文件方法问答
2007/03/16 PHP
php 文件上传实例代码
2012/04/19 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
python多进程实现进程间通信实例
2017/11/24 Python
Python使用wxPython实现计算器
2018/01/30 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python小白切忌乱用表达式
2020/05/29 Python
python两种注释用法的示例
2020/10/09 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
员工培训邀请函
2014/02/02 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2014年公务员工作总结
2014/11/18 职场文书
医院保洁员岗位职责
2015/02/13 职场文书