Question

I have 3 (at the moment, could be more in the future) styles that I want to add to a group of divs in rotating order.

The classes I want to assign are:
.blue, .red, .green

and I have 4 divs that I want to assign them to in rotating order:

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

I would like the end result to be:

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

and to keep on rotating through in the same order if I was to add more divs.

What’s the best way to go about this?

Answer 1

You can pass a callback to addClass ^[docs]:

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

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

The modulus operator is your friend if you want to rotate through a list.