Une autre vidéo de concept! C'est «juste une de ces choses» que vous devez comprendre dans jQuery. C'est en fait un peu unique à jQuery, dans la mesure où d'autres bibliothèques JavaScript populaires dans le passé ne l'ont pas fait de cette façon.
Nous avons déjà couvert un peu les sélecteurs. Par exemple, vous savez déjà que $("p")sélectionnera tous les paragraphes d'une page. Pas seulement le premier ou un aléatoire, tous. Vous pouvez facilement imaginer qu'il peut y en avoir beaucoup sur une page. Imaginez maintenant ce qui se passe lorsque vous faites:
$("p").hide();Tous sont cachés, non? Droit. Pas le premier ou un aléatoire, tous. Cette itération implicite . Dans les coulisses, jQuery parcourt automatiquement l'ensemble des éléments qu'il a trouvés et exécute la méthode que vous avez choisie. Nous n'avons pas littéralement besoin d'écrire une boucle nous-mêmes pour ce faire. Cela semble assez évident si vous vous familiarisez avec JavaScript est jQuery, mais de nombreuses bibliothèques dans le passé vous ont obligé à parcourir vous-même des collections d'éléments.
Si vous le souhaitez, vous pouvez toujours écrire la boucle vous-même. Cela ressemblerait peut-être à ceci, en utilisant les méthodes de boucle jQuery:
$("p").each(function() ( $(this).hide(); ));C'est à peu près la même chose. Pas nécessairement, mais vous pourriez. C'est une itération explicite .
Parfois, vous devez faire une itération explicite. Fondamentalement, si nous devons accéder à la valeur de thiset faire quelque chose de spécial avec elle, nous aurons besoin de notre propre construction de boucle pour travailler avec.
L'exemple de ce screencast comptait les caractères dans les éléments de liste et les ajoutait à la fin de la chaîne. Nous aurons besoin d'une itération explicite pour cela.
Voir le Pen 4b53b9f55662d0d26339e18277500eee de Chris Coyier (@chriscoyier) sur CodePen
Nous avons utilisé la méthode each () de jQuery ici, ce qui est parfait pour ce dont nous avons besoin. Un peu utile pour nous est de nous donner un compteur indexé à zéro à chaque itération auquel nous pouvons accéder si nécessaire.
$(".there-are-three-of-me").each(function(i) ( console.log(i); )); // 0 // 1 // 2