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

La fonction each dans jQuery est très pratique. La fonction $.each () encapsule une fonction de traversée très puissante. Elle peut parcourir tableau unidimensionnel, tableau multidimensionnel. , DOM, JSON Attendez, l'utilisation de $each dans le processus de développement JavaScript peut réduire considérablement notre charge de travail. Voici une fonction simple qui imite chacun, qui ne peut gérer que des objets de type tableau.

$.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 tableau). objet). S'il s'agit d'un tableau, Fonction de rappelPassez à chaque fois l'index du tableau et la valeur correspondante (la valeur peut également être obtenue via le mot-clé this, mais JavaScript enveloppera toujours cette valeur comme un objet (même s'il s'agit d'une chaîne ou d'un nombre), la méthode renverra le premier paramètre de l'objet parcouru par La méthode

each() peut faire la boucle DOM. structure 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.
L'utilisation de $each pendant le processus de développement JavaScript peut grandement faciliter notre travail en quantité.

Voici quelques utilisations courantes de chacun

chacun gère des tableaux unidimensionnels

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

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

chaque traitementtableau bidimensionnel

　　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] par rapport à 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) affichera comme a, aa, aaa, b, bb, bbb, c, cc, ccc

chacun traite les données json, chacune encore plus puissante, il peut parcourir chaque attribut

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

Ici, alert(key) 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. Puisqu'il n'est pas ordonné, où sont les nombres ?
Et ce val est équivalent à obj[key]

ecah traite les éléments dom Ici, un élément de formulaire d'entrée 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"/>

alors 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 vous utilisez this.name, ce sera le cas. output Le même résultat
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 sous la forme suivante

.

$("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 pourrez jamais savoir ce qui se passe et pourquoi.

À partir des 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 procédera automatiquement en fonction des éléments Jugement, puis adoptez 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

chaque méthode appellera la fonction fn un à un sur les sous-éléments du tableau jusqu'au résultat renvoyé en appelant un certains sous-éléments sont faux, c'est-à-dire que nous pouvons le traiter avec la fonction fn fournie et quitter chaque appel de méthode une fois qu'il remplit certaines conditions. 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

2.obj L'objet 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!