Ein weiteres Konzeptvideo! Dies ist „nur eines dieser Dinge“, die Sie in jQuery verstehen müssen. Es ist tatsächlich ein bisschen einzigartig für jQuery, da andere beliebte JavaScript-Bibliotheken es in der Vergangenheit nicht so gemacht haben.
Wir haben bereits einige Selektoren behandelt. Sie wissen beispielsweise bereits, dass $("p")alle Absätze auf einer Seite ausgewählt werden. Nicht nur der erste oder ein zufälliger, alle. Sie können sich leicht vorstellen, dass es auf einer Seite viele davon gibt. Stellen Sie sich nun vor, was passiert, wenn Sie Folgendes tun:
$("p").hide();Alle werden richtig versteckt? Richtig. Nicht die erste oder eine zufällige, alle. Diese implizite Iteration . Hinter den Kulissen durchläuft jQuery automatisch alle gefundenen Elemente und führt die von Ihnen ausgewählte Methode aus. Wir müssen dazu nicht buchstäblich selbst eine Schleife schreiben. Scheint ziemlich offensichtlich, wenn Sie in JavaScript jQuery einführen, aber in vielen Bibliotheken in der Vergangenheit mussten Sie selbst eine Sammlung von Elementen durchlaufen.
Wenn Sie möchten, können Sie die Schleife trotzdem selbst schreiben. Das würde vielleicht so aussehen, wenn man jQuery-Schleifenmethoden verwendet:
$("p").each(function() ( $(this).hide(); ));Das ist ungefähr das Gleiche. Nicht unbedingt, aber du könntest. Das ist explizite Iteration .
Manchmal müssen Sie eine explizite Iteration durchführen. Wenn wir auf den Wert von zugreifen thisund etwas Besonderes damit tun müssen, benötigen wir grundsätzlich unser eigenes Schleifenkonstrukt, um damit arbeiten zu können.
In diesem Beispiel in diesem Screencast wurden die Zeichen in Listenelementen gezählt und an das Ende der Zeichenfolge angehängt. Dafür benötigen wir eine 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 das ist, was wir brauchen. Ein nützliches Element für uns ist, dass wir bei jeder Iteration, auf die wir bei Bedarf zugreifen können, einen Zähler mit Nullindex erhalten.
$(".there-are-three-of-me").each(function(i) ( console.log(i); )); // 0 // 1 // 2