using '.each' method: how do I get the indexes of multiple ordered lists to each begin at [0]?
<p>I've got multiple divs, each with an ordered list (various lengths). I'm using jquery to add a class to each list item according to its index (for the purpose of columnizing portions of each list). What I have so far ...</p>

<pre><code>&lt;script type="text/javascript"&gt;

/*    Objective: columnize list items from a single ul or ol in a pre-determined number of columns
    1. get the index of each list item
    2. assign column class according to li's index
*/
$(document).ready(function() {

    $('ol li').each(function(index){
        // assign class according to li's index ... index = li number -1: 1-6 = 0-5; 7-12 = 6-11, etc.
        if ( index &lt;= 5 )    {
            $(this).addClass('column-1');
            }
        if ( index &gt; 5 &amp;&amp; index &lt; 12 )    {
            $(this).addClass('column-2');
            }
        if ( index &gt; 11 )    {
            $(this).addClass('column-3');
            }

        // add another class to the first list item in each column
        $('ol li').filter(function(index) {
            return index != 0 &amp;&amp; index % 6 == 0;
            }).addClass('reset');

    });    // closes li .each func
});    // closes doc.ready.func

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

<p>... succeeds if there's only one list; when there are additional lists, the last column class ('column-3') is added to all remaining list items on the page. In other words, the script is presently indexing continuously through all subsequent lists/list items, rather than being re-set to [0] for each ordered list.</p>

<p>Can someone please show me the proper method/syntax to correct/amend this, so that the script addresses/indexes each ordered list anew?</p>

<p>many thanks in advance.</p>

<p>shecky</p>

<p>p.s. the markup is pretty straight-up:</p>

<pre><code>&lt;div class="tertiary"&gt;
 &lt;h1&gt;header&lt;/h1&gt;
 &lt;ol&gt;
  &lt;li&gt;&lt;a href="#" title="a link"&gt;a link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="a link"&gt;a link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="a link"&gt;a link&lt;/a&gt;&lt;/li&gt;
 &lt;/ol&gt;
&lt;/div&gt;&lt;!-- END div class="tertiary" --&gt;
</code></pre>
