Explication détaillée de la méthode each() dans jquery à l'aide d'exemples-js tutoriel-php.cn

Explication détaillée de la méthode each() dans jquery à l'aide d'exemples

伊谢尔伦

Libérer： 2017-06-16 16:10:12

original

1330 Les gens l'ont consulté

La fonction

each() est une fonction outil fournie par pratiquement tous les frameworks. Grâce à elle, vous pouvez parcourir les valeurs d'attribut des objets et des tableaux et les traiter. 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. En d'autres termes : la méthode each fournie par jQuery est Tous les sous-éléments de. les objets fournis par le paramètre 1 sont appelés un à un. Chaque méthode fournie par l'objet jQuery appelle les sous-éléments de jQuery un par un.

Voici quelques utilisations couramment utilisées de chaque alert(i) affichera 0, 1, 2alert(val) affichera aaa, bbb, ccc

2. Chacun gère tableau bidimensionnel

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

Copier après la connexion

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']

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

Copier après la connexion

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

alert(j) affichera 0, 1, 2, 0, 1, 2, 0, 1, 2
alert(val) affichera a, aa, aaa, b, bb, bbb, c, cc, ccc

chacun pour traiter les données json, ceci chacun C'est encore plus puissant, il peut parcourir chaque attribut

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

Copier après la connexion

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 et de valeurs non ordonnés, 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.

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

Copier après la connexion

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

< nom d'entrée = "bbb" type="hidden" value="222" />

Ensuite, vous utilisez chacun comme suit

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

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 vous utilisez this.value affichera le même résultat

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

Copier après la connexion

each(callback)

pour chaque correspondance L'élément sert de contexte pour exécuter une fonction.
signifie que chaque fois que la fonction transmise est exécutée, le mot-clé this dans la fonction pointe vers un élément DOM différent (un élément correspondant différent à chaque fois). De plus, chaque fois que la fonction est exécutée, une valeur numérique représentant la position de l'élément comme environnement d'exécution dans l'ensemble des éléments correspondants est transmise à la fonction en tant que paramètre (un entier commençant à zéro). Renvoyer « false » arrêtera la boucle (tout comme utiliser « break » dans une boucle normale). Renvoie 'true' pour passer à la boucle suivante (tout comme utiliser '

continue

' dans une boucle normale).
Le rappel suivant est la

fonction de rappel

, indiquant l'opération qui doit être effectuée lors de la traversée des éléments. Commençons par un exemple simple ci-dessous : Parcourez deux images et définissez leurs attributs src. Remarque : ici, il s'agit de l'objet DOM plutôt que de l'objet jQuery. La méthode
each() spécifie une fonction à exécuter pour chaque élément correspondant. Astuce : renvoyer false peut être utilisé pour arrêter la boucle plus tôt. Syntaxe
$(selector).each(function(index,element)) Paramètre Description function(index,element) Obligatoire. Spécifie la fonction à exécuter pour chaque élément correspondant. •index - la position d'index du sélecteur
•element - l'élément actuel (vous pouvez également utiliser le sélecteur "this")

$("button").click(function(){ 
$("li").each(function(){ 
alert($(this).text()) 
}); 
});

Copier après la connexion

那怎么跳出each呢
jquery再遍历选定的对象时候用each比较方便。有种应用是找到里面符合条件的对象后，要跳出这个循环。
javascript的跳出循环一般用break.
同事遇到这个问题，下意识的用了break，想跳出这个循环。结果报错
SyntaxError: unlabeled break must be inside loop or switch
经查，应该用一个在回调函数里return false即可，大多数jq的方法都是如此的

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!