Jquery：超过1个div中每组元素的增量答案

【问题标题】：Jquery: Incrimentation for each set of elements in more than 1 divJquery：超过1个div中每组元素的增量
【发布时间】：2011-01-28 13:44:05
【问题描述】：

我正在制作一个 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 开始？

这真的很难简明扼要地解释。我希望有人能明白要点。

【问题讨论】：

标签： jquery auto-increment each

【解决方案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 并在其中循环，而不是整体设置然后循环遍历所有块。

【讨论】：