Jquery: Incrimentation für jeden Satz von Elementen in mehr als 1 div

Question

Ich mache eine JQuery Diashow. Es listet die Thumbnails, dass, wenn darauf geklickt, um das große Bild als Overlay offenbart. die Daumen mit den großen Bildern, um bis ich Attribute jede Miniaturansicht und großen Bild bin hinzufügen. Die Attribute enthalten eine Zahl, die jeden Daumen zu seinem entsprechenden Großbild übereinstimmt. Es funktioniert, wenn eine Diashow, die auf einer Seite. Aber ich will es an der Arbeit, wenn mehr als eine Diashow vorhanden ist.

Hier ist der Code für das Hinzufügen von Attributen zu Daumen und großen Bildern:

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

Das funktioniert. Um die Inkrementierung Arbeit zu machen, wenn es zwei Diashows auf einer Seite, ich dachte, ich könnte diesen Code-Stick in einer jeder Funktion ...

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

Das Problem dabei ist, dass der incrimenting Betreiber nicht für die zweite Diashow div nicht zurück (.slideshow), so dass ich mit den Daumen in dem ersten Ende .slideshow div Wesen 1,2,3 etc .. nummerierten und Daumen in die zweite .slideshow div Wesen 4,5,6 usw. nummeriert Wie mache ich die Zahlen in der zweiten .slideshow div zurückgesetzt und wieder von 1 starten?

Das ist wirklich schwer prägnant zu erklären. Ich hoffe, jemand bekommt das Wesentliche.

Answer 1

Sie jeweils eine Ebene nach unten gehen, stellen Sie sicher, es ist zu jeder Diashow wie folgt scoped:

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

Damit wird sie auf 0 in jedem .slideshow_content Block und Looping im Innern statt es insgesamt zu setzen und dann durch alle Blöcke Looping.