recherche

Maison >interface Web >js tutoriel >Comment utiliser chaque (rappel) de jquery ? Quel effet sera obtenu ?

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

伊谢尔伦
伊谢尔伦original
2017-06-16 15:58:481335parcourir

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>

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

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

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

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

Résultat : 0 1 2

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

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

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);
});
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"/>

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

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

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser l'événement ready dans jquery Utilisation de l'instance d'événement Ready ?Article suivant：Comment utiliser l'événement ready dans jquery Utilisation de l'instance d'événement Ready ?

Articles Liés

Voir plus