jquery - 将一组样式中的一个应用于每个选定项目

Question

我有 3 个（目前，将来可能会更多）样式，我想按旋转顺序添加到一组 div 中。

我要分配的类是：.blue、.red、.green

我有 4 个 div，我想按轮换顺序分配它们：

<div class="tripItem">
   ...
</div>
<div class="tripItem">
   ...
</div>
<div class="tripItem">
   ...
</div>
<div class="tripItem">
   ...
</div>

我希望最终结果是：

<div class="tripItem blue">
   ...
</div>
<div class="tripItem red">
   ...
</div>
<div class="tripItem green">
   ...
</div>
<div class="tripItem blue">
   ...
</div>

如果我要添加更多 div，则继续以相同的顺序旋转。

解决这个问题的最佳方法是什么？

Answer 1

您可以将回调传递给 addClass ^[docs]：

var classes =  ['blue', 'red', 'green'],
    len = classes.length;

$('div.tripItem').addClass(function(i) {
    return classes[i%len];
});

如果您想在列表中旋转，模数运算符是您的朋友。

Answer 2

var num = 0;
var colors = ['blue','red','green'];
$('.tripItem').each(function(){
    if(num >= colors.length) return false;
    $(this).addClass(colors[num]);
    num++;
});

Answer 3

​var colorArr = ['blue','red','green','yellow'];
$("div.tripItem").each(function(i){
    $(this).addClass(colorArr[i]);
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

演示