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下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
webpack打包多页面的方法
Nov 30 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 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类
2008/04/09 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
详解Python中heapq模块的用法
2016/06/28 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Python类及获取对象属性方法解析
2020/06/15 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
财务支持类个人的自我评价
2014/02/14 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
出生证明格式
2015/06/15 职场文书