使用jQuery向每7個元素添加不同的類

Question

我正在創建一個包含帖子列表的博客頁面。 每個博客帖子都有相同的html例如：

<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號博客時，它重新開始。 這有可能嗎？

任何指向正確方向的觀點都將受到歡迎！

Answer 1

您可以使用addClass並檢查其索引：

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

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

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

Answer 2

我建議使用CSS3選擇器 -我知道它帶有JavaScript，但是您已經在使用HTML5，因此您也可以使用。 坦率地說，與編寫純JS或JQuery函數相比，它可以節省您的時間：只要您不使用JavaScript就可以逃脫。 無論如何，請在此處查看選擇器

這會將集合中的第一個節點的類別更改，然后將第8個，然后第15個等更改為發布中，並以相同的方式繼續，但對於發布較小的節點，將其更改為第2個，第9個，依此類推。

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

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

Answer 3

使用jQuery可以通過以下方式完成：

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

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

Answer 4

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

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

這將遍歷您的帖子，使用index變量從klasses提取信息， klasses是類的數組。 當它到達klasses數組的“末端”時，由於%運算符，它重新開始。

編輯：看起來我們很多人都采用了類似的解決方案。 請注意，此解決方案使用.length代替硬編碼7來指示多少個項目。我不在乎您是否接受此答案，但是我建議您使用length，那樣您就可以添加/刪除類，而無需在其他地方更改代碼。

Answer 5

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