Ceci est un aperçu complet de la fonction jQuery.each ()
– l'une des fonctions les plus importantes et les plus utilisées de jQuery. Dans cet article, nous allons découvrir pourquoi et voir comment vous pouvez l'utiliser.
Cet article populaire a été mis à jour en 2020 pour refléter les meilleures pratiques actuelles et pour mettre à jour les conseils de conclusion sur les solutions natives utilisant JavaScript moderne. [19659003] Qu'est-ce que jQuery.each ()
La fonction each () de jQuery est utilisée pour parcourir chaque élément de l'objet jQuery cible – un objet qui contient un ou plusieurs éléments DOM et expose toutes les fonctions jQuery. Il est très utile pour la manipulation DOM à plusieurs éléments, ainsi que pour itérer sur des tableaux arbitraires et des propriétés d'objet. En plus de cette fonction, jQuery fournit une fonction d'assistance avec le même nom qui peut être appelée sans avoir préalablement sélectionné ou créé de Éléments DOM. Voyons les différents modes en action. L'exemple suivant sélectionne chaque élément Une sortie possible serait: Cette version utilise la fonction L'exemple suivant montre l'utilisation de la fonction utilitaire. Dans ce cas, l'objet à boucler est donné comme premier argument. Dans cet exemple, nous allons montrer comment boucler sur un tableau: Dans le dernier exemple, nous voulons montrer comment itérer sur les propriétés d'un objet: Tout cela se résume à fournir un rappel approprié. Le contexte du rappel, ` Cela signifie qu'il n'y a pas d'égalité stricte entre la valeur et le contexte. ` Le premier argument est l'index actuel, qui est soit un nombre (pour les tableaux) soit une chaîne (pour les objets). Voyons comment la fonction jQuery.each () nous aide en conjonction avec un objet jQuery. Le premier exemple sélectionne tous les éléments Le deuxième exemple génère tous les Supposons que nous avions les liens suivants sur la page: Le deuxième exemple produirait: Notons que les éléments DOM d'un objet jQuery sont dans leur forme «native» à l'intérieur du callback passé à En référence à notre deuxième exemple, cela signifie que nous pouvons obtenir l'attribut Voyons comment un tableau ordinaire peut être géré: Cet extrait de code renvoie: Rien de spécial ici. Un tableau comporte des indices numériques, nous obtenons donc des nombres à partir de 0 et allant jusqu'à N-1 où N est le nombre d'éléments dans le tableau. Nous pouvons avoir des structures de données plus complexes, telles que des tableaux dans des tableaux, des objets dans des objets, des tableaux dans des objets ou des objets dans des tableaux. Voyons comment Cet exemple affiche: Nous gérons la structure imbriquée avec un appel imbriqué à Cet exemple montre comment parcourir chaque élément avec la classe affectée Nous utilisons l'aide Dans ce cas, la sortie est: Nous n'avons pas à inclure d'index et de valeur. Ce ne sont que des paramètres qui aident à déterminer sur quel élément DOM nous procédons actuellement à l'itération. De plus, dans ce scénario, nous pouvons également utiliser la méthode Et nous l'obtiendrons sur la console: Notez que nous encapsulons l'élément DOM dans une nouvelle instance de jQuery, afin de pouvoir utiliser la méthode text () pour obtenir le contenu textuel de l'élément. Dans l'exemple suivant, lorsque l'utilisateur clique sur l'élément avec l'ID Après un délai dépendant de l'index ( 0 200 400 ,… millisecondes), nous éliminons l'élément: Dans cet article, nous avons montré comment utiliser la fonction Et si jQuery n'est pas votre truc, vous voudrez peut-être regarder l'utilisation de JavaScript natif Object.keys () et Méthodes Array.prototype.forEach () . Il existe également des bibliothèques comme foreach qui vous permettent d'itérer sur les paires de valeurs clés d'un objet de type tableau ou d'un objet de type dictionnaire. Rappelez-vous: Syntaxe jQuery.each ()
// ÉLÉMENTS DOM
$ ('div'). each (fonction (index, valeur) {
console.log (`div $ {index}: $ {this.id}`);
});
div0: en-tête
div1: principal
div2: pied de page
$ (sélecteur) .each ()
de jQuery, par opposition à la fonction utilitaire. // ARRAYS
const arr = [
'one',
'two',
'three',
'four',
'five'
];
$ .each (arr, fonction (index, valeur) {
console.log (valeur);
// Arrêtera de fonctionner après "trois"
return (valeur! == 'trois');
});
// Sorties: un deux trois
// OBJECTS
const obj = {
un 1,
deux: 2,
trois: 3,
quatre: 4,
cinq: 5
};
$ .each (obj, fonction (clé, valeur) {
console.log (valeur);
});
// Sorties: 1 2 3 4 5
this
sera égal à son deuxième argument, qui est la valeur actuelle. Cependant, comme le contexte sera toujours un objet, les valeurs primitives doivent être encapsulées: $. Each ({un: 1, deux: 2}, fonction (clé, valeur) {
console.log (this);
});
// Numéro 1 }
// Numéro 2 }
$. Chacun ({un: 1}, fonction (clé, valeur) {
console.log (cette valeur ==);
console.log (cette valeur ===);
});
// vrai
// faux
1. Exemple de fonction de base jQuery.each ()
a
de la page et affiche leur attribut href
: $ ('a'). Chacun (fonction (index, valeur) {
console.log (this.href);
});
href
externes sur la page Web (en supposant le protocole HTTP (S) uniquement): $ ('a'). Each (fonction (index, valeur) {
const link = this.href;
if (link.match (/ https?: / //)) {
console.log (lien);
}
});
SitePoint
Documents Web MDN
Exemple de domaine
https://www.sitepoint.com/
https://developer.mozilla.org/
http://example.com/
jQuery.each ()
. La raison en est que jQuery n'est en fait qu'un wrapper autour d'un tableau d'éléments DOM. En utilisant jQuery.each ()
ce tableau est itéré de la même manière qu'un tableau ordinaire. Par conséquent, nous ne récupérons pas les éléments enveloppés de la boîte. href
d'un élément en écrivant this.href
. Si nous voulions utiliser la méthode jQuery attr ()
nous aurions besoin de reconditionner l'élément comme suit: $ (this) .attr ('href')
. 2. Exemple de tableau jQuery.each ()
const numbers = [1, 2, 3, 4, 5];
$ .each (nombres, fonction (index, valeur) {
console.log (`$ {index}: $ {value}`);
});
0: 1
1: 2
2: 3
3: 4
4: 5
3. Exemple JSON jQuery.each ()
jQuery.each ()
peut nous aider dans de tels scénarios: const colors = [
{ 'red': '#f00' },
{ 'green': '#0f0' },
{ 'blue': '#00f' }
];
$ .each (couleurs, fonction () {
$ .each (this, fonction (nom, valeur) {
console.log (`$ {name} = $ {value}`);
});
});
rouge = # f00
vert = # 0f0
bleu = # 00f
jQuery.each ()
. L'appel externe gère le tableau des variables couleurs
; l'appel interne gère les objets individuels. Dans cet exemple, chaque objet n'a qu'une seule clé, mais en général, n'importe quel nombre peut être traité avec ce code. 4. Exemple de classe jQuery.each ()
productDescription
donnée dans le code HTML ci-dessous: each ()
au lieu de la méthode each ()
sur le sélecteur. $. Each ($ ('. ProductDescription'), function ( index, valeur) {
console.log (index + ':' + $ (valeur) .text ());
});
0: rouge
1: Orange
2: vert
chaque
plus pratique. Nous pouvons l'écrire comme ceci: $ ('. ProductDescription'). Each (function () {
console.log ($ (this) .text ());
});
Rouge
Orange
vert
de jQuery
5. Exemple de délai jQuery.each ()
5demo
tous les éléments de la liste sont immédiatement mis en orange.
$ ('# 5demo '). On (' click ', fonction (e) {
$ ('li'). each (fonction (index) {
$ (this) .css ('background-color', 'orange')
.delay (index * 200)
.fadeOut (1500);
});
e.preventDefault ();
});
Conclusion
jQuery.each ()
pour parcourir les éléments DOM, les tableaux et les objets. C'est une petite fonction puissante et qui fait gagner du temps que les développeurs devraient avoir dans leurs trousses à outils. $. Each ( )
et $ (sélecteur) .each ()
sont deux méthodes différentes définies de deux manières différentes.
Source link