jquery nth-child()選擇器的簡單應(yīng)用
更新時(shí)間:2010年07月10日 01:31:37 作者:
今天項(xiàng)目中遇到過一個(gè)這樣的問題,就是希望讀出來的文章列表能夠每隔五個(gè)加一個(gè)分割條,而不是每個(gè)都加。
通過網(wǎng)上咨詢使用這個(gè)選擇器便很容易的解決。特此記錄一下。
下面是主要的代碼
js腳本:
<script type="text/javascript">
$(document).ready(
function () {
//每隔五行給li加一個(gè)樣式
$('.article_li li:nth-child(5n)').addClass('liborder');
$('.article_li li:last').addClass('liborder');
}
);
</script>
html代碼:
<ul class="article_li">
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)物業(yè)稅:長沙暫不試點(diǎn)</a>
</li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
</ul>
具體的用法這里就不寫了,大家可以參考
http://www.dbjr.com.cn/css/28294.html
http://www.dbjr.com.cn/article/23617.htm
效果圖如下:
下面是主要的代碼
js腳本:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(
function () {
//每隔五行給li加一個(gè)樣式
$('.article_li li:nth-child(5n)').addClass('liborder');
$('.article_li li:last').addClass('liborder');
}
);
</script>
html代碼:
復(fù)制代碼 代碼如下:
<ul class="article_li">
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)物業(yè)稅:長沙暫不試點(diǎn)</a>
</li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物業(yè)稅:長沙暫不試點(diǎn)</a> </li>
</ul>
具體的用法這里就不寫了,大家可以參考
http://www.dbjr.com.cn/css/28294.html
http://www.dbjr.com.cn/article/23617.htm
效果圖如下:

相關(guān)文章
jQuery學(xué)習(xí)筆記 操作jQuery對象 屬性處理
HTML文檔,不但有一系列語義標(biāo)簽,每個(gè)標(biāo)簽下屬還有一系列屬性節(jié)點(diǎn)。自然我們也想去操作這些屬性節(jié)點(diǎn)。格式仍然為$(selector).方法2012-09-09jQuery操作iframe中js函數(shù)的方法小結(jié)
這篇文章主要介紹了jQuery操作iframe中js函數(shù)的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery操作iframe中的元素、函數(shù)常用方法與注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印
jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印,不可思議吧,接下來為您介紹它的使用方法及操作步驟,感興趣的朋友可以了解下2013-01-01jquery中交替點(diǎn)擊事件toggle方法的使用示例
jquery中交替點(diǎn)擊事件toggle方法中有兩個(gè)參數(shù),分別是要交替執(zhí)行的事件。如果不傳參默認(rèn)是顯示隱藏功能,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下2013-12-12基于jQuery UI CSS Framework開發(fā)Widget的經(jīng)驗(yàn)
jQuery UI CSS Framework是jQuery UI中的一個(gè)樣式框架,可以利用jQuery Theme roller 來生成自己想要的css樣式效果。我們可以利用jQuery UI的一些框架來開發(fā)出基于jQuery UI CSS Framework效果的插件來。2010-08-08jquery實(shí)現(xiàn)全選、不選、反選的兩種方法
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)全選、不選、反選的兩種方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09