使用jquery爲每7個元素添加不同的類

我使用帖子列表創建了一個博客頁面。每篇博客文章例如具有相同的HTML：使用jquery爲每7個元素添加不同的類

<article class="post"> 
    post 1 
</article>

我想給所有7篇類（「中」，「小」，「大」，「大」，「小」，」序列小'，'中等'）

<article class="post medium"> 
    post 1 
</article> 
<article class="post small"> 
    post 2 
</article> 
<article class="post large"> 
    post 3 
</article> 
<article class="post large"> 
    post 4 
</article>

當我發佈博客編號8時，它開始全部結束。這甚至有可能嗎？

任何指向正確的方向將非常歡迎！

來源

2012-11-19 fomfur

你是如何創建'

'？除非你通過AJAX請求創建它，否則可能會更好。 – romo

您可以使用addClass並檢查其指數：

var classNames = ['medium','small','large','large','small','small','medium']; 

$('article.post').addClass(function(i){ 
    return classNames[ i % classNames.length ]; 
});

演示：http://jsfiddle.net/wgdv4/

來源

2012-11-19 17:06:14 voigtan

工程就像一個魅力！從來沒有想過使用.length。 – fomfur

很高興爲您效力:) – voigtan

查找mod運算符 - （％）。如果n可以乾淨地整除7（其中n是當前帖子的ID），那麼執行（n％7 == 0）將返回true，您可以使用它重置樣式計數。

來源

2012-11-19 17:03:26 leonsbuddydave

我會推薦使用CSS3選擇器 - 我知道它是標記爲JavaScript的，但您已經在使用HTML5，因此您也可以。老實說，與編寫純JS或JQuery函數相比，它會節省大量時間：只要您不使用JavaScript，就可以避開。無論如何，看看選擇器here

這改變了一個集合中的第一個節點的類，然後是第8，然後第15等後中等，並繼續以同樣的方式，但第二，第九等小後和等等。

ul li:nth-child(1n+7) { 
    class: "post medium"; 
} 

ul li:nth-child(2n+7) { 
    class: "post small"; 
}

來源

2012-11-19 17:04:44 lifetimes

考慮到HTML5被使用，這不是一個糟糕的解決方案。 –

如果實際包含示例CSS3示例，則爲+1 – Matt

您可以詳細說明'class' CSS規則嗎？我從來沒有聽說過它，它似乎不像你演示的那樣工作。 http://jsfiddle.net/tomprogramming/AGmBh/ –

使用jQuery這可以通過以下方式進行：

var classes = ["medium", "small", "large", "large", "small", "small", "medium"]; 
$(".post").each(function(i) { 
    $(this).addClass(classes[i % classes.length]); 
});

DEMO：http://jsfiddle.net/DCYjF/

來源

2012-11-19 17:05:59 VisioN

var klasses = ['medium','small','large','large','small','small','medium']; 

$('article.post').each(function(index) 
{ 
$(this).addClass(klasses[index % klasses.length]); 
});

這將itereate在您的文章，使用index變量從klasses，這是你的類的數組拉。當它到達klasses陣列的'末端'時，重新開始，這要歸功於%運營商。

編輯：看起來像我們很多人走過類似的解決方案。只需要注意的一點是，這個解決方案使用.length作爲多少項而不是硬編碼的指標。我不在乎你是否不接受這個答案，但我會建議使用長度，這樣你可以添加/刪除類而不必在別處更改代碼。

來源

2012-11-19 17:06:17

使用jquery爲每7個元素添加不同的類

回答

相關問題