Applying one of an array of styles to each selected item
<p>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.</p>

<p>The classes I want to assign are:
.blue, .red, .green</p>

<p>and I have 4 divs that I want to assign them to in rotating order:</p>

<pre><code>&lt;div class="tripItem"&gt;
   ...
&lt;/div&gt;
&lt;div class="tripItem"&gt;
   ...
&lt;/div&gt;
&lt;div class="tripItem"&gt;
   ...
&lt;/div&gt;
&lt;div class="tripItem"&gt;
   ...
&lt;/div&gt;
</code></pre>

<p>I would like the end result to be:</p>

<pre><code>&lt;div class="tripItem blue"&gt;
   ...
&lt;/div&gt;
&lt;div class="tripItem red"&gt;
   ...
&lt;/div&gt;
&lt;div class="tripItem green"&gt;
   ...
&lt;/div&gt;
&lt;div class="tripItem blue"&gt;
   ...
&lt;/div&gt;
</code></pre>

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

<p>What's the best way to go about this?</p>
