5 Exemples de fonctions jQuery.each () –

 // ÉLÉMENTS DOM
$ ('div'). each (fonction (index, valeur) {
  console.log (`div $ {index}: $ {this.id}`);
});

Une sortie possible serait:

 div0: en-tête
div1: principal
div2: pied de page

Cette version utilise la fonction $ (sélecteur) .each () de jQuery, par opposition à la fonction utilitaire.

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:

 // 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

Dans le dernier exemple, nous voulons montrer comment itérer sur les propriétés d'un objet:

 // 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

Tout cela se résume à fournir un rappel approprié. Le contexte du rappel, 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 }

`

Cela signifie qu'il n'y a pas d'égalité stricte entre la valeur et le contexte.

 $. Chacun ({un: 1}, fonction (clé, valeur) {
  console.log (cette valeur ==);
  console.log (cette valeur ===);
});

// vrai
// faux

`

Le premier argument est l'index actuel, qui est soit un nombre (pour les tableaux) soit une chaîne (pour les objets).

1. Exemple de fonction de base jQuery.each ()

Voyons comment la fonction jQuery.each () nous aide en conjonction avec un objet jQuery. Le premier exemple sélectionne tous les éléments a de la page et affiche leur attribut href :

 $ ('a'). Chacun (fonction (index, valeur) {
  console.log (this.href);
});

Le deuxième exemple génère tous les 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);
  }
});

Supposons que nous avions les liens suivants sur la page:

 SitePoint 
 Documents Web MDN 
 Exemple de domaine 

Le deuxième exemple produirait:

 https://www.sitepoint.com/
https://developer.mozilla.org/
http://example.com/

Notons que les éléments DOM d'un objet jQuery sont dans leur forme «native» à l'intérieur du callback passé à 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.

En référence à notre deuxième exemple, cela signifie que nous pouvons obtenir l'attribut 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 ()

Voyons comment un tableau ordinaire peut être géré:

 const numbers = [1, 2, 3, 4, 5];
$ .each (nombres, fonction (index, valeur) {
  console.log (`$ {index}: $ {value}`);
});

Cet extrait de code renvoie:

 0: 1
1: 2
2: 3
3: 4
4: 5

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.

3. Exemple JSON jQuery.each ()

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 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}`);
  });
});

Cet exemple affiche:

 rouge = # f00
vert = # 0f0
bleu = # 00f

Nous gérons la structure imbriquée avec un appel imbriqué à 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 ()

Cet exemple montre comment parcourir chaque élément avec la classe affectée productDescription donnée dans le code HTML ci-dessous:

 Rouge 
 Rose 
 Orange 
 Sarcelle 
 Vert 

Nous utilisons l'aide each () au lieu de la méthode each () sur le sélecteur.

 $. Each ($ ('. ProductDescription'), function ( index, valeur) {
  console.log (index + ':' + $ (valeur) .text ());
});

Dans ce cas, la sortie est:

 0: rouge
1: Orange
2: vert

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 chaque plus pratique. Nous pouvons l'écrire comme ceci:

 $ ('. ProductDescription'). Each (function () {
  console.log ($ (this) .text ());
});

Et nous l'obtiendrons sur la console:

 Rouge
Orange
vert

Notez que nous encapsulons l'élément DOM dans une nouvelle instance de jQuery, afin de pouvoir utiliser la méthode text () de jQuery

pour obtenir le contenu textuel de l'élément.

5. Exemple de délai jQuery.each ()

Dans l'exemple suivant, lorsque l'utilisateur clique sur l'élément avec l'ID 5demo tous les éléments de la liste sont immédiatement mis en orange.

  
 Un 
  
 Deux [19659071] Trois 
  
 Quatre 
  
 Cinq 

Après un délai dépendant de l'index ( 0 200 400 ,… millisecondes), nous éliminons l'élément:

 $ ('# 5demo '). On (' click ', fonction (e) {
  $ ('li'). each (fonction (index) {
    $ (this) .css ('background-color', 'orange')
           .delay (index * 200)
           .fadeOut (1500);
  });

  e.preventDefault ();
});

Conclusion

Dans cet article, nous avons montré comment utiliser la fonction 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.

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: $. Each ( ) et $ (sélecteur) .each () sont deux méthodes différentes définies de deux manières différentes.

Florian Rappl est un consultant informatique indépendant travaillant dans les domaines des clients / programmation serveur, calcul haute performance et développement web. Il est expert en C / C ++, C # et JavaScript. Florian donne régulièrement des conférences lors de conférences ou de groupes d'utilisateurs. Vous pouvez trouver son blog sur florian-rappl.de .