jquery - 選択した各アイテムにスタイルの配列の 1 つを適用する

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

リストをローテーションしたい場合は、モジュラス演算子が役に立ちます。

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

デモ