Introduction à each() de jquery et exemples détaillés de sa méthode de traversée

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 tableau unidimensionnel , tableau multidimensionnel , DOM, JSON, etc. 🎜> en
javaScriptL'utilisation de $each pendant le processus de développement peut réduire considérablement notre charge de travail. Voici quelques utilisations courantes de chacun

1 chacun traite un tableau unidimensionnel

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

alert(i) produira 0. , 1, 2

alert(val) affichera aaa, bbb, ccc

2 chacun gère

tableau 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 ) sera affiché sous la forme ['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, ceci 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, alert(key) produira un deux trois Sortie 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 et de valeurs non ordonnés, comment peut-il y avoir des 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

et que vous utilisez chacun comme suit

<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, alert (val) affichera [object HTMLInputElement] car il s'agit d'un élément de formulaire.

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

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

alert(val.name); affichera aaa, bbb, ccc, ddd, si vous l'utilisez. name affichera le même résultat

alert(val.value); affichera 111 222 333 444. Si this.value est utilisé, le même résultat sera affiché

jquery jugera automatiquement en fonction des éléments entrants, et puis basé sur Le résultat du jugement est traité par la méthode apply ou call. Dans l'implémentation de fn, vous pouvez directement utiliser ce pointeur

pour faire référence au tableau

ou aux sous-éléments de l'objet. 1. L'objet obj est un tableau

Chaque méthode appellera la fonction fn un par un sur les sous-éléments du tableau jusqu'au résultat renvoyé en appelant un certain sous-élément est faux.En d'autres termes, nous pouvons le traiter par la fonction fn fournie pour quitter chaque appel de méthode après avoir rempli certaines conditions. Lorsque la méthode each fournit le paramètre arg, le paramètre passé par l'appel de 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

Cette méthode est la même. La plus grande différence entre 1 et 1 est que la méthode fn sera exécutée une par une quelle que soit 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.

Trois méthodes de parcours 1 Sélecteur + parcours

$('div').each(function (i. ){

i est la valeur de l'index

cela signifie parcourir chaque

objet dom

});

2 , sélecteur + traversal

$('div').each(function (index,domEle){

index est la valeur de l'index

domEle signifie parcourir chaque objet dom

});

3. Une méthode de parcours plus adaptée

1) Obtenez d'abord un objet de collection

2) Parcourez chacun des objets de collection Un élément

var d=$("div");

$.each(d,function (index,domEle){

d est la collection à parcourir

index est la valeur de l'index

domEle signifie parcourir chaque paire de dom

});

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!