Jquery：对超过 1 个 div 中的每组元素进行递增

Question

我正在制作 Jquery 幻灯片。它列出了缩略图，单击缩略图时，会显示大图像作为叠加层。为了将拇指与大图像匹配，我向每个缩略图和大图像添加属性。这些属性包含一个数字，该数字将每个拇指与其相应的大图像相匹配。当页面上存在一张幻灯片时它会起作用。但如果存在多个幻灯片，我希望它能够工作。

这是向拇指和大图像添加属性的代码：

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);
});

这有效。为了在页面上有两个幻灯片时使增量工作，我想我可以将此代码粘贴到每个函数中...

$('.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);
    });
});

问题是增量运算符不会为第二个幻灯片 div (.slideshow) 重置，所以我最终在第一个 .slideshow div 中的拇指编号为 1,2,3 等。第二个 .slideshow div 中的拇指编号为 4,5,6 等。我如何在第二个 .slideshow 中制作数字div重置并重新从1开始？

这实在是很难简明扼要地解释清楚。我希望有人能明白要点。

Answer 1

在每个中，下降一个级别，确保它的作用域为每个幻灯片，如下所示：

$('.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++);
    });
});

这将每个 .slideshow_content 块内的它们设置为 0 并在其中循环，而不是整体设置然后循环遍历所有块。