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与google map api结合使用 控件,监听器
Mar 04 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 Javascript
JavaScript实现简单图片切换
Apr 29 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
用js遍历 table的脚本
2008/07/23 Javascript
Prototype使用指南之selector.js说明
2008/10/26 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
2014/10/17 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
深入探讨前端框架react
2015/12/09 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
巧用canvas
2017/01/21 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python实现大文件分割与合并
2019/07/22 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
实习生体会的自我评价范文
2013/11/28 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书