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 相关文章推荐
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
Vue.js表单控件实践
Oct 27 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
JS实现前端路由功能示例【原生路由】
May 29 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 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+DBM的同学录程序(1)
2006/10/09 PHP
PHP 简单日历实现代码
2009/10/28 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
详解python之配置日志的几种方式
2017/05/22 Python
Python探索之SocketServer详解
2017/10/28 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
python设置表格边框的具体方法
2020/07/17 Python
python归并排序算法过程实例讲解
2020/11/04 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers