Comment utiliser chaque (rappel) de jquery ? Quel effet sera obtenu ?-js tutoriel-php.cn

Comment utiliser chaque (rappel) de jquery ? Quel effet sera obtenu ?

伊谢尔伦

Libérer： 2017-06-16 15:58:48

original

1334 Les gens l'ont consulté

Vue d'ensemble

Exécutez une fonction avec chaque élément correspondant comme contexte.

signifie qu'à 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 en tant qu'environnement d'exécution dans l'ensemble d'éléments correspondant 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).

Les exemples sont les suivants :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
 <title> 遍历元素</title>
  <script src="js/jQuery.js" type="text/JavaScript"></script>
    <!-- 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
     -->
 <style type="text/css">
  body{font-size:13px}
  img{border:solid 1px #ccc;padding:3px;margin:5px;width:143px;height:101px}
 </style>
 <script type="text/javascript">
  $(function() {
   $("img").each(function(index){
    // 根据形参index 设置元素的title 属性
    this.title = " 第" + index +" 幅风景图片，alt 内容是" + this.alt;
    if(i==1)
     return false;
   })
  })
 </script>
  </head>
  <body>
 <p>
  <img title="picture0" src="images/img05.jpg" alt=" 第0 幅风景画" />
  <img title="picture1" src="images/img06.jpg" alt=" 第1 幅风景画" />
  <img title="picture2" src="images/img07.jpg" alt=" 第2 幅风景画" />
 </p>
  </body>
</html>

Copier après la connexion

Méthode d'itération générale, qui peut être utilisée pour itérer des objets et des tableaux.

Contrairement à la méthode $().each() qui parcourt les objets jQuery, cette méthode peut être utilisée pour parcourir n'importe quel objet. La fonction de rappel a deux paramètres : le premier est le membre de l'objet ou l'index du tableau, et le second est la variable ou le contenu correspondant. Si vous devez quitter chaque boucle, vous pouvez faire en sorte que la fonction de rappel renvoie false et les autres valeurs de retour seront ignorées.

var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(key,value){ alert(key+"的年龄是"+value); });

Copier après la connexion

Résultat : Tom a 20 ans
Jerry a 30 ans

Jim a 40 ans

var arr=[1,2,3];
$.each(arr,function(key,value){ key++;alert(key+"="+value);});

Copier après la connexion

Résultat : 1 =1 2=2 3=3

var arr=[1,2,3];
$.each(arr,function(item){ alert(item);});

Copier après la connexion

Résultat : 0 1 2

var dic={"tom" : 20,"jerry" :30, "jim":40};
$.each(dic,function(){ alert(this);});

Copier après la connexion

Résultat : 20 30 40

$ .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). La fonction de rappel passe à chaque fois dans le tableau. L'index 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, même s'il s'agit d'une chaîne ou d'un nombre), la méthode. renverra l'objet traversé Le premier paramètre.

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. 🎜> développé en javaScript Utiliser $each pendant le processus peut réduire considérablement notre charge de travail.
chacun traite un tableau unidimensionnel

alert(i) affichera 0, 1, 2

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

Copier après la connexion

alert(val) affichera aaa, bbb, ccc

each handles

tableau bidimensionnel

arr2 est un tableau bidimensionnel, et item équivaut à prendre chaque tableau de ce tableau bidimensionnel.

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

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

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

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

alert(val) affichera a, aa, aaa, b, bb, bbb, c, cc, ccc

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

Ici, alert(key) affichera un deux trois

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

Copier après la connexion

alert(val) affichera un, 1, deux, 2, trois, 3

Pourquoi la clé ici n'est-elle pas un nombre ? attributs, car le format json est un ensemble de valeurs d'attributs 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

et que vous l'utilisez ensuite 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"/>

Copier après la connexion

alors 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);
});

Copier après la connexion

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

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.

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

Copier après la connexion

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!