欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery nth-child()選擇器的簡單應(yīng)用

 更新時(shí)間：2010年07月10日 01:31:37   作者：  
今天項(xiàng)目中遇到過一個(gè)這樣的問題，就是希望讀出來的文章列表能夠每隔五個(gè)加一個(gè)分割條，而不是每個(gè)都加。
通過網(wǎng)上咨詢使用這個(gè)選擇器便很容易的解決。特此記錄一下。
下面是主要的代碼
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對象 屬性處理

    jQuery學(xué)習(xí)筆記 操作jQuery對象 屬性處理

    HTML文檔，不但有一系列語義標(biāo)簽，每個(gè)標(biāo)簽下屬還有一系列屬性節(jié)點(diǎn)。自然我們也想去操作這些屬性節(jié)點(diǎn)。格式仍然為$(selector).方法
    2012-09-09
  • jQuery中Form相關(guān)知識匯總

    jQuery中Form相關(guān)知識匯總

    這篇文章主要介紹了jQuery中Form相關(guān)知識匯總,總結(jié)的十分全面，需要的朋友可以參考下
    2015-01-01
  • jQuery.each使用詳解

    jQuery.each使用詳解

    這篇文章主要給大家詳細(xì)介紹了jQuery.each使用方法及源碼分析的相關(guān)資料,需要的朋友可以參考下
    2015-07-07
  • jQuery操作iframe中js函數(shù)的方法小結(jié)

    jQuery操作iframe中js函數(shù)的方法小結(jié)

    這篇文章主要介紹了jQuery操作iframe中js函數(shù)的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery操作iframe中的元素、函數(shù)常用方法與注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2016-07-07
  • web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印

    web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印

    jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印,不可思議吧，接下來為您介紹它的使用方法及操作步驟，感興趣的朋友可以了解下
    2013-01-01
  • jQuery 中的 DOM 操作

    jQuery 中的 DOM 操作

    在DOM操作中，常常需要?jiǎng)討B(tài)創(chuàng)建HTML內(nèi)容，使文檔在瀏覽器里的呈現(xiàn)效果發(fā)生變化，并且達(dá)到各種各樣的人機(jī)交互目的.
    2016-04-04
  • jQuery使用children()找到特定元素的子元素

    jQuery使用children()找到特定元素的子元素

    children()是jQuery中的內(nèi)置方法,用于查找與所選元素相關(guān)的所有子元素,?jQuery中的children()方法向下遍歷到所選元素的單個(gè)級別并返回所有元素,我們還可以在children()的參數(shù)中添加過濾器、使用children()來定位特定的子元素以及使用each()方法來迭代子元素等
    2023-11-11
  • jquery中交替點(diǎn)擊事件toggle方法的使用示例

    jquery中交替點(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開發(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-08
  • jquery實(shí)現(xiàn)全選、不選、反選的兩種方法

    jquery實(shí)現(xiàn)全選、不選、反選的兩種方法

    這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)全選、不選、反選的兩種方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-09-09

最新評論