Question

I am using a simple each function to add a class to a set of li tags in an unordered list.

$('div ul li').each(function(e){
   $(this).addClass('c' + e);       
});

Which returns the following HTML

<div>
    <ul>
        <li class="c0"></li>
        <li class="c1"></li>
        <li class="c2"></li>
        <li class="c3"></li>
    </ul>
</div>  
<div>
    <ul>
        <li class="c4"></li>
        <li class="c5"></li>
        <li class="c6"></li>
        <li class="c7"></li>
    </ul>
</div>  

It’s doing what it should which is adding the index to the end of the classname. How can I make it so that it resets for each new unordered list. So it would return something like this.

<div>
    <ul>
        <li class="c0"></li>
        <li class="c1"></li>
        <li class="c2"></li>
        <li class="c3"></li>
    </ul>
</div>  
<div>
    <ul>
        <li class="c0"></li>
        <li class="c1"></li>
        <li class="c2"></li>
        <li class="c3"></li>
    </ul>
</div>  

Here is the JS fiddle of the code I have pasted above, with a working version of what I currently have: http://jsfiddle.net/kdGgK/1/

Answer 1

You could nest each() functions.

$('div ul').each(function() {
   $(this).children('li').each(function(e){
      $(this).addClass('c' + e);        
   });
});