Zebra striping groups of li elements
<p>I have the following HTML and I'd like to zebra stripe the contents in groups of 3:</p>

<pre><code>&lt;ul id="item-order"&gt;

    &lt;li class="thumbnail"&gt;Item 1&lt;/li&gt;
    &lt;li class="thumbnail"&gt;Item 2&lt;/li&gt;
    &lt;li class="thumbnail"&gt;Item 3&lt;/li&gt;
    &lt;li class="thumbnail"&gt;Item 4&lt;/li&gt;
    &lt;li class="thumbnail"&gt;Item 5&lt;/li&gt;
    &lt;li class="thumbnail"&gt;Item 6&lt;/li&gt;
    &lt;li class="thumbnail"&gt;Item 7&lt;/li&gt;
    &lt;li class="thumbnail"&gt;Item 8&lt;/li&gt;
    &lt;li class="thumbnail"&gt;Item 9&lt;/li&gt;

&lt;/ul&gt;
</code></pre>

<p>So I'd like to generate the following using jQuery:</p>

<pre><code>&lt;ul id="item-order"&gt;
    &lt;li class="thumbnail stripe"&gt;Item 1&lt;/li&gt;
    &lt;li class="thumbnail stripe"&gt;Item 2&lt;/li&gt;
    &lt;li class="thumbnail stripe"&gt;Item 3&lt;/li&gt;
    &lt;li class="thumbnail"&gt;Item 4&lt;/li&gt;
    &lt;li class="thumbnail"&gt;Item 5&lt;/li&gt;
    &lt;li class="thumbnail"&gt;Item 6&lt;/li&gt;
    &lt;li class="thumbnail stripe"&gt;Item 7&lt;/li&gt;
    &lt;li class="thumbnail stripe"&gt;Item 8&lt;/li&gt;
    &lt;li class="thumbnail stripe"&gt;Item 9&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>How can I go about this? I have something like this in mind, but I'm not sure what to put in the if statement.</p>

<pre><code>$('#item-order li:visible').each(function (i) {
    if (...) $(this).addClass('stripe');
});
</code></pre>
