5 jQuery.each () Exemples de fonction

Cet article traite de la fonction jQuery.each () en profondeur - l'une des fonctions les plus importantes et couramment utilisées dans jQuery. Nous explorerons son importance et apprendrons à l'utiliser.

Points de base

La fonction
1. jQuery.each () est un outil multi-fonctions dans jQuery qui itère sur les éléments, les tableaux et les objets DOM, afin d'effectuer efficacement les opérations DOM multi-éléments et le traitement des données.
2. Cette fonction fournit deux modes de fonctionnement: en tant que méthode appelée sur un objet jQuery (pour les éléments DOM), et en tant que fonction pratique pour les tableaux et les objets, chaque mode convient à différents types de structures de données.
3. Avec des exemples pratiques, cet article démontre la puissance et la flexibilité de jQuery.each (), met en évidence son importance dans la simplification des itérations et met en évidence des méthodes JavaScript alternatives pour effectuer des tâches similaires.

Qu'est-ce que jQuery.each ()?

La fonction JQuery de JQuery est utilisée pour parcourir chaque élément de l'objet jQuery cible - un objet contenant un ou plusieurs éléments DOM et exposer toutes les fonctions jQuery. Il est très utile pour les opérations DOM multi-éléments et itération des propriétés arbitraires de tableau et d'objet.

En plus de cette fonction, JQuery fournit également une fonction d'assistance avec le même nom qui peut être appelé sans sélection préalable ni création d'aucun élément DOM.

jQuery.each () Syntaxe

Jetons un coup d'œil à l'application pratique de différents modes.

L'exemple suivant sélectionne chaque élément <div> sur la page Web et publie l'index et l'ID de chaque élément: <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;// DOM 元素 $('div').each(function(index, value) { console.log(`div${index}: ${this.id}`); });&lt;/code&gt;</pre> <p> Les résultats de sortie possibles sont: </p> <pre class="brush:php;toolbar:false">&lt;code&gt;div0:header div1:main div2:footer&lt;/code&gt;</pre> <p> Cette version utilise la fonction <code>$(selector).each() de jQuery, pas des fonctions pratiques.

L'exemple suivant montre l'utilisation de fonctions pratiques. Dans ce cas, l'objet à boucle sur est donné comme le premier paramètre. Dans cet exemple, nous montrerons comment traverser le tableau:

<code class="language-javascript">// 数组
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

$.each(arr, function(index, value) {
  console.log(value);
  // 将在 "three" 后停止运行
  return (value !== 'three');
});

// 输出：one two three</code>

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

<code class="language-javascript">// 对象
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

$.each(obj, function(key, value) {
  console.log(value);
});

// 输出：1 2 3 4 5</code>

Tout cela se résume à la fourniture de la fonction de rappel appropriée. Le contexte de la fonction de rappel this sera égal à son deuxième paramètre, la valeur actuelle. Cependant, comme le contexte est toujours un objet, la valeur d'origine doit être enveloppée:

<code class="language-javascript">$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }</code>

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

<code class="language-javascript">$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false</code>

Le premier paramètre est l'index actuel, qui est un nombre (pour les tableaux) ou une chaîne (pour les objets).

1. JQUERY JQUERY.EACH () Exemple de fonction

Voyons comment la fonction jQuery.each () est utilisée en conjonction avec les objets jQuery. Le premier exemple sélectionne tous les éléments a de la page et publie leurs propriétés href:

<code class="language-javascript">$('a').each(function(index, value){
  console.log(this.href);
});</code>

Le deuxième exemple produit chaque href externe sur la page Web (en supposant uniquement le protocole HTTP (S)):

<code class="language-javascript">$('a').each(function(index, value){
  const link = this.href;

  if (link.match(/https?:\/\//)) {
    console.log(link);
  }
});</code>

Supposons qu'il y ait le lien suivant sur la page:

<code class="language-html"><a href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>
<a href="https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a>
<a href="https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a></code>

Le deuxième exemple sortira:

<code class="language-javascript">// DOM 元素
$('div').each(function(index, value) {
  console.log(`div${index}: ${this.id}`);
});</code>

Nous devons noter que l'élément DOM de l'objet jQuery est une forme "native" dans la fonction de rappel qu'il passe à jQuery.each (). La raison en est que JQuery n'est en fait qu'un wrapper pour les tableaux d'éléments DOM. En utilisant jQuery.each (), ce tableau est itéré de la même manière qu'un tableau normal. Par conséquent, nous n'aurons pas les éléments de l'emballage de la boîte.

À propos de notre deuxième exemple, cela signifie que nous pouvons obtenir l'attribut this.href de l'élément en écrivant href. Si nous voulons utiliser la méthode attr() de jQuery, nous devons reconditionner l'élément comme ceci: $(this).attr('href').

2. jQuery.each () Exemple de tableau

Voyons comment gérer les tableaux normaux:

<code>div0:header
div1:main
div2:footer</code>

Cette sortie de code d'extrait de code:

<code class="language-javascript">// 数组
const arr = [
  'one',
  'two',
  'three',
  'four',
  'five'
];

$.each(arr, function(index, value) {
  console.log(value);
  // 将在 "three" 后停止运行
  return (value !== 'three');
});

// 输出：one two three</code>

Rien de spécial ici. Le tableau a un index numérique, nous obtenons donc des nombres à partir de 0 à n-1 où n est le nombre d'éléments dans le tableau.

3. jQuery.each () JSON Exemple

Nous pouvons avoir des structures de données plus complexes, telles que des tableaux dans des tableaux, des objets dans des objets, des objets dans des tableaux ou des tableaux dans des objets. Voyons comment jQuery.each () peut nous aider dans ce cas:

<code class="language-javascript">// 对象
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5
};

$.each(obj, function(key, value) {
  console.log(value);
});

// 输出：1 2 3 4 5</code>

cet exemple de sortie:

<code class="language-javascript">$.each({ one: 1, two: 2 } , function(key, value) {
  console.log(this);
});

// Number { 1 }
// Number { 2 }</code>

Nous utilisons des appels imbriqués à jQuery.each () pour gérer les structures imbriquées. L'appel externe gère le tableau des couleurs variables; Dans cet exemple, il n'y a qu'une seule clé par objet, mais vous pouvez généralement utiliser ce code pour traiter n'importe quel nombre de clés.

4. jQuery.each () Exemple de classe

Cet exemple montre comment traverser chaque élément de la classe ProductDescription attribuée (donnée dans le HTML ci-dessous):

<code class="language-javascript">$.each({ one: 1 } , function(key, value) {
  console.log(this == value);
  console.log(this === value);
});

// true
// false</code>

Nous utilisons chaque fonction d'assistance () au lieu de chaque méthode () sur le sélecteur.

<code class="language-javascript">$('a').each(function(index, value){
  console.log(this.href);
});</code>

Dans ce cas, la sortie est:

<code class="language-javascript">$('a').each(function(index, value){
  const link = this.href;

  if (link.match(/https?:\/\//)) {
    console.log(link);
  }
});</code>

Nous n'avons pas à inclure l'index et la valeur. Ce ne sont que des paramètres qui aident à déterminer quel élément DOM nous itèrent actuellement. De plus, dans ce cas, nous pouvons également utiliser une méthode plus pratique. Nous pouvons écrire de cette façon:

<code class="language-html"><a href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>
<a href="https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846">MDN web docs</a>
<a href="https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1">Example Domain</a></code>

Nous allons entrer dans la console:

<code>https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7
https://www.php.cn/link/235fba44e32ba4dd3a3f72db1a8a6846
https://www.php.cn/link/60c4a88bac6125d490af523a8c94e5e1</code>

Notez que nous emballons l'élément DOM dans une nouvelle instance jQuery afin que nous puissions utiliser la méthode Text () de JQuery pour obtenir le contenu texte de l'élément.

5. jQuery.each () Exemple de retard

Dans l'exemple suivant, lorsque l'utilisateur clique sur un élément avec ID 5Demo, tous les éléments de la liste seront définis sur Orange immédiatement.

<code class="language-javascript">const numbers = [1, 2, 3, 4, 5];
$.each(numbers, function(index, value){
  console.log(`${index}: ${value}`);
});</code>

Après le retard lié à l'indice (0, 200, 400 ... MS), nous faisons fondre l'élément:

<code>0:1
1:2
2:3
3:4
4:5</code>

Conclusion

Dans cet article, nous démontrons comment itérer sur les éléments, les tableaux et les objets DOM à l'aide de la fonction jQuery.each (). Il s'agit d'une fonction puissante et économe en temps que les développeurs devraient intégrer dans leur propre boîte à outils.

Si jQuery n'est pas votre choix préféré, vous voudrez peut-être envisager d'utiliser des méthodes JavaScript native Object.keys() et Array.prototype.forEach(). Il existe également des bibliothèques comme ForEach qui vous permettent d'itérer sur des paires de valeurs clés d'objets de tableau de classe ou d'objets de dictionnaire.

N'oubliez pas: $.each() et $(selector).each() sont deux méthodes différentes définies de deux manières différentes.

(Cet article a été mis à jour en 2020 pour refléter les meilleures pratiques actuelles et mettre à jour les conclusions sur les solutions natives utilisant le javascript moderne. Pour en savoir plus sur JavaScript, lisez notre livre JavaScript: From Novice to Ninja, Second Edition》)

Des questions fréquemment posées sur jQuery chaque fonction ()

Quel est le but de la fonction .each () dans jQuery? La fonction .each () dans jQuery est utilisée pour parcourir une collection d'éléments DOM et effectuer des opérations spécifiques sur chaque élément.

Comment utiliser la fonction .Each () dans jQuery? Vous pouvez utiliser la fonction .each () en sélectionnant un ensemble d'éléments à l'aide du sélecteur jQuery, puis en appelant .each () sur cette sélection. Vous fournissez une fonction de rappel qui définit l'action à effectuer sur chaque élément.

Quels sont les paramètres de la fonction de rappel utilisés avec .each ()? La fonction de rappel accepte deux paramètres: index (l'index actuel de l'élément de la collection) et l'élément (l'élément DOM actuel étant itéré).

Comment utiliser le paramètre d'index dans la fonction de rappel .each ()? Vous pouvez utiliser le paramètre d'index pour suivre la position de l'élément actuel de la collection, ce qui est très utile pour les opérations conditionnelles ou d'autres opérations.

Quels sont les cas d'utilisation courants pour la fonction

.each ()? Les cas d'utilisation courants incluent l'itération d'une liste d'éléments pour manipuler leurs propriétés, valeurs ou styles et effectuer des actions personnalisées sur chaque élément de la collection.