Jquery: Incrimentation for each set of elements in more than 1 div

Question

I'm making a Jquery slideshow. It lists thumbnails, that when clicked on, reveal the large image as an overlay. To match up the thumbs with the large images I'm adding attributes to each thumbnail and large image. The attributes contain a number which matches each thumb to its corresponding large image. It works when one slideshow is present on a page. But I want it to work if more than one slideshow is present.

Here's the code for adding attributes to thumbs and large images:

thumbNo = 0;
largeNo = 0;
$('.slideshow_content .thumbs img').each(function() {            
   thumbNo++;
   $(this).attr('thumbimage', thumbNo);
   $(this).attr("title", "Enter image gallery");
});
$('.slideshow_content .image_container .holder img').each(function() {   
   largeNo++;
   $(this).addClass('largeImage' + largeNo);
});

This works. To make the incrementation work when there are two slideshows on a page, I thought I could stick this code in an each function...

$('.slideshow').each(function() {
    thumbNo = 0;
    largeNo = 0;
    $(this + '.slideshow_content .thumbs img').each(function() {            
       thumbNo++;
       $(this).attr('thumbimage', thumbNo);
       $(this).attr("title", "Enter image gallery");
    });
    $(this + '.slideshow_content .image_container .holder img').each(function() {   
       largeNo++;
       $(this).addClass('largeImage' + largeNo);
    });
});

The problem with this is that the incrimenting operator does not reset for the second slideshow div (.slideshow), so I end up with thumbs in the first .slideshow div being numbered 1,2,3 etc.. and thumbs in the second .slideshow div being numbered 4,5,6 etc. How do I make the numbers in the second .slideshow div reset and start from 1 again?

This is really hard to explain concisely. I hope someone gets the gist.

Answer 1

In your each, go down a level, make sure it's scoped to each slideshow like this:

$('.slideshow_content').each(function() {
    thumbNo = 0;
    largeNo = 0;
    $(this).find('.thumbs img').each(function() {
       $(this).attr('thumbimage', thumbNo++);
       $(this).attr("title", "Enter image gallery");
    });
    $(this).find('.image_container .holder img').each(function() {   
       $(this).addClass('largeImage' + largeNo++);
    });
});

This sets them to 0 inside each .slideshow_content block and looping inside it instead of setting it overall and then looping through all blocks.

Answer 2

Try this smarty ;-)

    $(function() {
 //in just one each statement put all your selectors (comma separated)   
      $('#first li , #second li').each( function (i) {
 //get the total number of elements in the first selector     
        var total = $('#first li').size();  
 //when the i is bigger then the total ...      
        if ( i >= total ) 
 //reset the counter...
          i = i-total;
 //do stuff here...       
        $(this).text(i);

      });
    });​

HTML

<ul id="first">
  <li>...</li> <- 0
  <li>...</li> <- 1
  <li>...</li> <- 2
...  
</ul>

<ul id="second">
  <li>...</li> <- 0
  <li>...</li> <- 1
  <li>...</li> <- 2
...
  </ul>