#10: Explizite vs. implizite Iteration

Ein weiteres Konzeptvideo! Dies ist „einfach eines dieser Dinge“, die man in jQuery verstehen muss. Es ist eigentlich ein bisschen einzigartig für jQuery, da andere beliebte JavaScript-Bibliotheken in der Vergangenheit dies nicht so gemacht haben.

Wir haben bereits Selektoren ziemlich behandelt. Sie wissen zum Beispiel bereits, dass $("p") alle Absätze auf einer Seite auswählt. Nicht nur den ersten oder einen zufälligen, sondern alle. Sie können sich leicht vorstellen, dass es viele davon auf einer Seite gibt. Stellen Sie sich nun vor, was passiert, wenn Sie

$("p").hide();

Alle werden ausgeblendet, richtig? Richtig. Nicht der erste oder ein zufälliger, alle. Das ist implizite Iteration. Hinter den Kulissen durchläuft jQuery automatisch die gesamte Menge der gefundenen Elemente und führt die von Ihnen gewählte Methode aus. Wir müssen nicht buchstäblich eine Schleife schreiben, um dies zu tun. Scheint ziemlich offensichtlich, wenn Ihre Einführung in JavaScript jQuery ist, aber viele Bibliotheken haben Sie in der Vergangenheit aufgefordert, Sammlungen von Elementen selbst zu durchlaufen.

Wenn Sie möchten, können Sie die Schleife immer noch selbst schreiben. Das könnte dann etwa so aussehen, mit jQuery-Schleifenmethoden.

$("p").each(function() {
  $(this).hide();
});

Das ist ziemlich dasselbe. Nicht unbedingt, aber das könnte man. Das ist explizite Iteration.

Manchmal müssen Sie explizite Iteration durchführen. Grundsätzlich, wenn wir auf den Wert von this zugreifen und etwas Besonderes damit tun müssen, benötigen wir unser eigenes Schleifenkonstrukt, um damit zu arbeiten.

Das Beispiel in diesem Screencast zählte die Zeichen in Listenelementen und fügte sie am Ende des Strings hinzu. Dafür benötigen wir explizite Iteration.

Siehe den Stift 4b53b9f55662d0d26339e18277500eee von Chris Coyier (@chriscoyier) auf CodePen

Wir haben hier die each() Methode von jQuery verwendet, die perfekt für unsere Bedürfnisse ist. Ein nützlicher Punkt ist, dass sie uns einen nullbasierten Zähler für jede Iteration gibt, auf den wir bei Bedarf zugreifen können.

$(".there-are-three-of-me").each(function(i) {
  
  console.log(i);
  
}); 

// 0
// 1
// 2