Guide d'utilisation de la méthode $each() dans jquery_jquery

$.each() est différent de $(selector).each(). Ce dernier est spécialement utilisé pour parcourir des objets jquery. Le premier peut être utilisé pour parcourir n'importe quelle collection (qu'il s'agisse d'un tableau ou d'un objet). S'il s'agit d'un tableau, la fonction de rappel transmettra l'index du tableau et la valeur correspondante (la valeur peut également être obtenue via le mot-clé this, mais JavaScript encapsulera toujours cette valeur en tant qu'objet - qu'il s'agisse d'une chaîne ou un nombre), et la méthode renverra l'objet parcouru.

La méthode

each() peut rendre la structure de la boucle DOM concise et moins sujette aux erreurs. La fonction each() encapsule une fonction de traversée très puissante et est très pratique à utiliser. Elle peut parcourir des tableaux unidimensionnels, des tableaux multidimensionnels, DOM, JSON, etc.
Utiliser $each pendant le processus de développement JavaScript peut réduire considérablement notre charge de travail.

Voici quelques utilisations courantes de chacun

chacun traite un tableau unidimensionnel

var arr1 = [ "aaa", "bbb", "ccc" ]; 
$.each(arr1, function(i,val){ 
alert(i); 
alert(val);
});

alert(i) affichera 0, 1, 2
alert(val) affichera aaa, bbb, ccc

Chacun gère des tableaux bidimensionnels

　　var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
　　$.each(arr, function(i, item){ 
alert(i); 
alert(item); 
　　});

arr2 est un tableau bidimensionnel, et item équivaut à prendre chaque tableau de ce tableau bidimensionnel.
item[0] est relatif à la prise de la première valeur de chaque tableau unidimensionnel
alert(i) affichera 0, 1, 2 car ce tableau bidimensionnel contient 3 éléments du tableau
alert(item) affichera ['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']

Après avoir légèrement modifié le traitement de ce tableau à deux chiffres

var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
　　$.each(arr, function(i, item){ 
　　$.each(item,function(j,val){
　　　　 alert(j);
　　　　alert(val);
　}); 
});

alert(j) affichera 0, 1, 2, 0, 1, 2, 0, 1, 2

alert(val) sera affiché sous la forme a, aa, aaa, b, bb, bbb, c, cc, ccc

chacun traite les données json, chacun est encore plus puissant, il peut parcourir chaque attribut

　　var obj = { one:1, two:2, three:3}; 
　　each(obj, function(key, val) { 
　　alert(key); 
　　alert(val); 
　　});

Ici, l'alerte (clé) affichera un deux trois
alert(val) affichera un, 1, deux, 2, trois, 3
Pourquoi la clé ici n'est-elle pas un nombre mais un attribut ? Parce que le format json est un ensemble d'attributs-valeurs non ordonnés, où sont les nombres ?
Et ce val équivaut à obj[key]

ecah traite les éléments DOM. Ici, un élément de formulaire de saisie est utilisé comme exemple.

Si vous avez un morceau de code comme celui-ci dans votre domaine

<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>

Ensuite, vous utilisez chacun comme suit

$.each($("input:hidden"), function(i,val){ 
alert(val);
alert(i);
alert(val.name);
alert(val.value); 
});

Ensuite, alert(val) affichera [object HTMLInputElement] car il s'agit d'un élément de formulaire.

alert(i) affichera 0, 1, 2, 3

alert(val.name); affichera aaa, bbb, ccc, ddd Si this.name est utilisé, le même résultat sera affiché
. alert(val.value); affichera 111 222 333 444. Si vous utilisez this.value, le même résultat sera affiché

.

Si vous modifiez le code ci-dessus dans le formulaire suivant

$("input:hidden").each(function(i,val){
alert(i);
alert(val.name);
alert(val.value); 
});

Comme vous pouvez le voir, les résultats de sortie sont les mêmes. Quant à la différence entre les deux méthodes d'écriture, je ne sais pas encore. Ce changement produira les mêmes résultats lorsqu’il sera appliqué aux opérations sur les tableaux ci-dessus.

De cette façon, les résultats réels de plusieurs exemples ont été répondus. Alors continuez à étudier, vous ne pouvez jamais savoir ce qui se passe et pourquoi.

D'après les exemples ci-dessus, nous pouvons voir que les objets jQuery et jQuery implémentent cette méthode. Pour les objets jQuery, la méthode each est simplement déléguée : l'objet jQuery est passé comme premier paramètre à la méthode each de jQuery.

Regardez l'implémentation de chacun dans jQuery (extrait Internet)

function (object, callback, args) {
//该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数args
var name, i = 0,length = object.length;
if (args) {
if (length == undefined) {
for (name in object) {
if (callback.apply(object[name], args) === false) {
break;
}
}
} else {
for (; i < length;) {
if (callback.apply(object[i++], args) === false) {
break;
}
}
}
} else {
if (length == undefined) {
for (name in object) {
if (callback.call(object[name], name, object[name]) === false) {
break;
}
}
} else {
for (var value = object[0]; i < length && callback.call(value, i, value) !== false; value = object[++i]) {}
/*object[0]取得jQuery对象中的第一个DOM元素，通过for循环，
得到遍历整个jQuery对象中对应的每个DOM元素，通过 callback.call( value,i,value);
将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；
其中callback是类似于 function(index, elem) { ... } 的方法。
所以就得到 $("...").each(function(index, elem){ ... });
*/
}
}
return object;
}

jquery effectuera automatiquement un jugement basé sur les éléments entrants, puis utilisera la méthode apply ou call en fonction du résultat du jugement. Dans l'implémentation de fn, vous pouvez directement utiliser ce pointeur pour référencer les sous-éléments du tableau ou de l'objet.

L'objet 1.obj est un tableau

La méthode

each appellera la fonction fn un par un sur les sous-éléments du tableau jusqu'à ce que le résultat renvoyé en appelant un certain sous-élément soit faux. En d'autres termes, nous pouvons le traiter avec la fonction fn fournie. faites-le remplir certaines conditions. Quittez simplement chaque appel de méthode. Lorsque la méthode each fournit le paramètre arg, le paramètre passé par l'appel de la fonction fn est arg, sinon : l'index du sous-élément, le sous-élément lui-même

L'objet 2.obj n'est pas un tableau

La plus grande différence entre cette méthode et 1 est que la méthode fn sera exécutée l'une après l'autre sans tenir compte de la valeur de retour. En d'autres termes, toutes les propriétés de l'objet obj seront appelées par la méthode fn, même si la fonction fn renvoie false. Les paramètres transmis lors de l'appel sont similaires à 1.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.