Question

我想要以旋转顺序添加到一组div中的3个（目前可能会更多）样式。

我想分配的课程是： .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];
});

modulus operator是您的朋友，如果您想在列表中进行轮换。

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]);
});

DEMO

将一组样式应用于每个所选项目

3 个答案: