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相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 实用jquery操作表单元素的简单代码

    取下拉菜单选中项的文本: 获取和设置下拉菜单的值: 清空下拉菜单: 给下列菜单添加元素: 取单选框值: 单选或复选按钮的选择: 取复选框值: 判断单选或复选框是否被选中: 元素可用不可用: 判断元素可用不可用. 实用jquery操作表单元素代码 /* 假设在一个表单中有一个按钮id="save" $(document).ready(function(){ $("#save").click(function(){ $("#save").attr(&

  • jQuery动态添加可拖动元素完整实例(附demo源码下载)

    jQuery动态添加可拖动元素完整实例(附demo源码下载)

    本文实例讲述了jQuery动态添加可拖动元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type&

  • jquery设置表单元素为不可用的简单代码

    本章节通过简单的实例代码介绍一下如何将表单元素设置为不可用状态. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <script type=

  • jQuery获取元素父节点的方法

    jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个例子 复制代码 代码如下: <ul class="parent1">     <li><a href="#" id="item1">jquery获取父节点</a></li>     <li><a href="

  • jQuery如何获取动态添加的元素

    jQuery如何获取动态添加的元素

    一.问题描述 用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素. 二.解决方法 度娘推荐的方法基本是用live()方法 live()的官方定义和用法: live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素). live()的详细使用方法可以查看jQuery live() live()和

  • jQuery实现每隔几条元素增加1条线的方法

    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/199

  • jquery <li>标签 隔若干行加空白或者加虚线的方法

    jquery <li>标签 隔若干行加空白或者加虚线的方法

    实例如下: $(function () { $('ul li').addClass(function (i) { return i % 6 == 5 ? "ab" : ""; }); // 隔6行 加空白.或者加虚线 $('.imglist li').after(function (i) { var css = ""; if (i % 3 == 2) { css = "<div class='dashed clear' >&

  • jQuery+CSS3实现四种应用广泛的导航条制作实例详解

    jQuery+CSS3实现四种应用广泛的导航条制作实例详解

    导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下面有横线)等.每种导航条都有自己的特色,比如高亮显示的导航条看起来比较简单,但是视觉效果还不错,具有动画效果的导航条在视觉上也是有很好的效果. 接下来将会一一介绍4种应用比较广的导航条,即:高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,具有摩擦运动动画的导航条. 1.高亮显示的导航

  • jQuery为动态生成的select元素添加事件的方法

    项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelect =""; 2.在js中写好获取服务端数据的代码 function genVoucherGroupSelect(rowID){ return $(strVoucherGroupSelect).attr("id", "sl_" + rowID).pa

  • jQuery EasyUI tree增加搜索功能的实现方法

    扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏. /** * 1)扩展jquery easyui tree的节点检索方法.使用方法如下: * $("#treeId").tree("search", searchText); * 其中,treeId为easyui tree的根UL元素的ID,searchText为检索的文本. * 如果searchText为空或"",将恢复展示所有节点为正常状

  • 为JQuery EasyUI 表单组件增加焦点切换功能的方法

    为JQuery EasyUI 表单组件增加焦点切换功能的方法

    1.背景说明 在使用 JQuery  EasyUI 各表单组件时,实际客户端页面元素是由 JQuery EasyUI 生成的,元素的焦点切换,虽然 Tab 键可以正常用,但顺序控制属性 tabindex 不起作用,因为页面看到的元素,是生成的,没有tabindex 属性,而真实的元素被隐藏了.本文通过一个自定义函数,实现Tab 和 回车键的焦点切换功能. 2.函数定义 通过捕获窗口按件,对回车和Tab键进行了热点切换处理.先根据当前焦点,获取需要tabindex 属性,加1后为下一焦点无素的属性

  • 基于jQuery替换table中的内容并显示进度条的代码

    效果图如下:http://jialiren.sinaapp.com/jdt/ Html代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>进度条列</title> <script type=&qu

  • JS实现为动态添加的元素增加事件功能示例【基于事件委托】

    JS实现为动态添加的元素增加事件功能示例【基于事件委托】

    本文实例讲述了JS实现为动态添加的元素增加事件功能.分享给大家供大家参考,具体如下: 我们在日常开发中有时会通过js创建一些元素,但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js动态添加事件</title>

  • jQuery与原生JavaScript选择HTML元素集合用法对比分析

    本文实例讲述了jQuery与原生JavaScript选择HTML元素集合用法.分享给大家供大家参考,具体如下: 通过调用document.getElementsByTagName, document.getElementsByName以及document.getElementsByClassName(部分浏览器不支持),可以返回HTMLCollection对象.表面上,它们与数组很类似,因为它们都包含length属性并且元素都可以通过[index]方式访问.然而,实际上它们并不是数组:诸如pus

  • jQuery动态创建元素以及追加节点的实现方法

    我们知道js中有三种动态创建元素的方法,jQuery中也可以动态的创建元素 例如: var str = $("<a href='http://www.jb51.net'>我们</a>"); $("ul").append(str); //将动态创建的str元素追加到ul下面 追加节点 在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素,位置),在jQuery中是 append 追加在父元素的最后一个子

随机推荐