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