Javascript Chaque Fonction

| | | | | | | | | | | | | | | | | | | | | |

jQuery each () est un moyen concis d’itérer dans les éléments DOM. La méthode Each () est conçue pour être appelée sur l’objet jQuery cible. Un objet jQuery est un objet qui contient un ou plusieurs éléments DOM et a accès aux méthodes jQuery. Non seulement each () est moins sujet aux erreurs, mais cela facilite la manipulation d’un plus grand nombre d’éléments DOM.

jQuery each () nécessite un fonction de rappel - une fonction passée à une autre fonction qui sera exécutée plus tard. Dans la fonction de rappel se trouve l’accès au numéro d’index de l’élément et à l’élément lui-même. Une revue plus complète des fonctions de rappel peut être trouvée ici .

L’application de chacun () est aussi simple que n’importe quelle boucle JavaScript, mais il y a quelques endroits pour une confusion potentielle. Nous allons clarifier ces points et examiner la syntaxe. √Ä la fin de ce guide, il y aura des exemples de code étape par étape pour voir différentes manières d’appliquer jQuery each ().

Qu’est-ce que jQuery each () ?

jQuery chacun est une méthode de boucle pour la bibliothèque jQuery. Il fonctionne comme une boucle JavaScript en itérant sur les éléments DOM. jQuery chaque () nécessite une fonction de rappel, et à l’intérieur de la fonction de rappel se trouve l’endroit o√π les éléments DOM peuvent être manipulés.

Dans le corps de la fonction de rappel, les instructions conditionnelles peut être utilisé pour modifier certains des éléments sélectionnés. Les instructions conditionnelles sont des instructions if‚Ķ then en JavaScript. Cela fournit un niveau de contrôle plus approfondi sur la manière exacte dont les éléments sont modifiés.

Syntaxe jQuery each ()

jQuery chacun peut être invoqué de deux manières. Premièrement, en tant que méthode appelée sur un élément sélectionné. La fonction de rappel accepte jusqu’à deux arguments facultatifs: index et valeur. Index est le numéro d’index de l’élément actuel. Si l’élément actuel était le premier dans la liste, le numéro d’index retournerait 0.

L’argument value fait référence à l’élément courant. Il est important de noter que pour concaténer une méthode à la valeur, nous devons envelopper la valeur dans un sélecteur jQuery. Nous mettons tout cela dans un code abstrait afin que nous puissions casser vers le bas la syntaxe .

Ici, nous sélectionnons chaque

N’oubliez pas que [object Object] est une représentation sous forme de chaaîne d’un objet. Cela signifie que nous devons appeler une méthode pour extraire la valeur exacte que nous voulons. Dans le cas ci-dessus, nous utilisons la méthode text () pour révéler l’attribut text de l’objet. En savoir plus sur [object object] pour avoir une idée de ce qui est exactement revenu.

L’exemple ci-dessus enregistrera le numéro d’index suivi de l’attribut de texte pour chaque

L’écrire de cette manière enregistre le texte du important = "padding-left: 1em ; padding-right: 1em ;"> "PLUS: Erreur: fin inattendue de la saisie

Ce guide couvre les détails des fonctions des flèches.

Exemples jQuery each ()

Développons les exemples de syntaxe ci-dessus et ajoutons quelques attributs. Commençons par un rendu HTML basique d’une liste de couleurs appartenant à différentes classes.

Ceci rend chaque élément de texte dans le DOM. Tout d’abord, commençons par simplement enregistrer le texte dans la console en utilisant à la fois les fonctions fléchées et une fonction traditionnelle.

En sélectionnant uniquement sélectionnés est renvoyé .

Nous retournons les mêmes résultats, mais en utilisant le mot-clé this.

Nous pouvons utiliser une fonction anonyme - une fonction sans nom, telle que le rappel. Encore une fois, il renvoie le texte rouge, violet et bleu. Il convient de mentionner que bien que les fonctions fléchées aient certaines fonctionnalités dans jQuery, il est recommandé d’utiliser la notation fonctionnelle traditionnelle pour les rappels jQuery.

Nous savons maintenant comment parcourir une collection d’éléments. Maintenant, amusons-nous et changeons de couleur !

Suite à la page de liste de couleurs, nous avons maintenant ajouté quelques classes à la page d’élément