jQuery實(shí)現(xiàn)每隔幾條元素增加1條線的方法

更新時(shí)間：2016年06月27日 09:45:19 作者：懶人

這篇文章主要介紹了jQuery實(shí)現(xiàn)每隔幾條元素增加1條線的方法,可實(shí)現(xiàn)每隔10條li元素增加一條虛線的功能,涉及jQuery元素的匹配與屬性動(dòng)態(tài)設(shè)置技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)每隔幾條元素增加1條線的方法。分享給大家供大家參考，具體如下：

運(yùn)行效果截圖如下：

具體代碼如下：

<!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>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

精心挑選的12款優(yōu)秀的基于jQuery的手風(fēng)琴效果插件和教程
當(dāng)你想在有限的頁面空間內(nèi)展示多個(gè)內(nèi)容片段的時(shí)候，手風(fēng)琴（Accordion）效果就顯得非常有用，它可以幫助你以對(duì)用戶非常友好的方式實(shí)現(xiàn)多個(gè)內(nèi)容片段之間的切換。借助流行的 jQuery 框架，只需很少的代碼就可以實(shí)現(xiàn)精美的手風(fēng)琴效果，幫助你的網(wǎng)站吸引更多用戶的眼球
2012-08-08
深入理解JQuery keyUp和keyDown的區(qū)別
這篇文章主要是對(duì)JQuery中keyUp與keyDown的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
jQuery清除定時(shí)任務(wù)的實(shí)現(xiàn)
jQuery中使用setInterval函數(shù)設(shè)置定時(shí)任務(wù),并通過clearInterval函數(shù)來清除這些任務(wù),從而避免資源浪費(fèi)或邏輯混亂,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-09-09
jQuery插件FusionCharts繪制的2D帕累托圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D帕累托圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件載入xml數(shù)據(jù)及繪制2D帕累托圖的具體實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
基于jQuery實(shí)現(xiàn)圖片推拉門動(dòng)畫效果的兩種方法
本文給大家分享兩種方法實(shí)現(xiàn)''推拉門''動(dòng)畫效果也可以稱作是手風(fēng)琴效果，具體實(shí)現(xiàn)方法大家通過本文一起學(xué)習(xí)吧
2017-08-08
Notify - 基于jquery的消息通知插件
Notify - 基于jquery的消息通知插件，需要的朋友可以收藏下。
2011-10-10
jQuery 學(xué)習(xí)第六課實(shí)現(xiàn)一個(gè)Ajax的TreeView
TreeView是asp.net自帶的控件，不過自帶的控件在靈活性上有諸多限制。在jQuery的幫助下，自己實(shí)現(xiàn)一個(gè)TreeView也不困難。本文是前幾篇文章所講內(nèi)容的一個(gè)綜合演練。
2010-05-05
基于daterangepicker日歷插件使用參數(shù)注意的問題
下面小編就為大家?guī)硪黄赿aterangepicker日歷插件使用參數(shù)注意的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
jQuery插件HighCharts繪制2D圓環(huán)圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D圓環(huán)圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件繪制圓環(huán)圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jQuery查看選中對(duì)象HTML代碼的方法
這篇文章主要介紹了jQuery查看選中對(duì)象HTML代碼的方法,涉及jQuery頁面元素操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-06-06