Comment utiliser $.each dans JQuery et la différence avec $(selector).each()-js tutoriel-php.cn

Comment utiliser $.each dans JQuery et la différence avec $(selector).each()

伊谢尔伦

Libérer： 2017-06-17 14:37:47

original

997 Les gens l'ont consulté

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., pendant le processus de développement javaScript L'utilisation de $each peut réduire considérablement notre charge de travail.

Exemple de méthode each() :

var arr = [ "aaa", "bbb", "ccc" ];
$.each(arr, function(i,a){
alert(i); // i 是循环的序数
alert(a); // a 是值
});
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});

Copier après la connexion

En fait, arr1 est un tableau bidimensionnel, item équivaut à prendre chaque tableau unidimensionnel,
item[ 0] Par rapport à la prise de la première valeur de chaque tableau unidimensionnel
Le résultat de chacun ci-dessus est donc : 1 4 7

Une fonction de parcours générale qui peut être utilisée pour traverser les objets et les tableaux. Les tableaux et les objets pseudo-tableaux contenant un attribut de longueur (les objets pseudo-tableaux tels que l'objet arguments d'une fonction) sont parcourus avec un index numérique, de 0 à longueur-1, et les autres objets sont parcourus. parcouru via l'attribut.

$.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'elle soit). est un tableau ou un objet). S'il s'agit d'un tableau, La fonction de rappel passe à chaque fois l'index du tableau et la valeur correspondante (la valeur peut aussi être obtenue grâce au 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 le premier paramètre de l'objet parcouru.

Exemple :————Passer dans un tableau

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
$.each([52, 97], function(index, value) {
alert(index + ‘: ‘ + value);
});
 
</script>
</body>
</html>

Copier après la connexion

//输出
 
0: 52
1: 97

Copier après la connexion

Exemple :————Si une carte est utilisée comme collection, la fonction de rappel transmettra une paire clé-valeur

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
var map = {
‘flammable&#39;: ‘inflammable&#39;,
‘duh&#39;: ‘no duh&#39;
};
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
});
 
</script>
</body>
</html>

Copier après la connexion

//输出
 
flammable: inflammable
duh: no duh

Copier après la connexion

Exemple : --- Vous pouvez quitter $.each() lorsque vous renvoyez false dans le rappel fonction, si elle renvoie un non-false. Autrement dit, tout comme si vous utilisiez continue dans la boucle for, elle entrera immédiatement dans le prochain parcours

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; }
  p#five { color:red; }
  </style>
  <script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
 
<body>
  <p id=”one”></p>
  <p id=”two”></p>
  <p id=”three”></p>
  <p id=”four”></p>
  <p id=”five”></p>
<script>
    var arr = [ "one", "two", "three", "four", "five" ];//数组
    var obj = { one:1, two:2, three:3, four:4, five:5 }; // 对象
    jQuery.each(arr, function() {  // this 指定值
      $(“#” + this).text(“Mine is ” + this + “.”);  // this指向为数组的值, 如one, two
       return (this != “three”); // 如果this = three 则退出遍历
   });
    jQuery.each(obj, function(i, val) {  // i 指向键, val指定值
      $(“#” + i).append(document.createTextNode(” – ” + val));
    });
</script>
</body>
</html>

Copier après la connexion

// 输出
 
Mine is one. – 1
Mine is two. – 2
Mine is three. – 3
- 4
- 5

Copier après la connexion

Exemple : --- parcours Éléments du tableau , passer l'index et la valeur

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
$.each( [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;], function(i, l){
alert( “Index #” + i + “: ” + l );
});
 
</script>
</body>
</html>

Copier après la connexion

Exemple : --- Parcourir les propriétés de l'objet, transmettez la clé et la valeur

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
$.each( { name: “John”, lang: “JS” }, function(k, v){
alert( “Key: ” + k + “, Value: ” + v );
});
 
</script>
</body>
</html>

Copier après la connexion

Exemple d'auto-commentaire

1. le premier élément (utilisez retrun true) et entrez l'itération suivante

<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script>
</head>
<body>
<script>
 
var myArray=["skipThis", "dothis", "andThis"];
$.each(myArray, function(index, value) {
if (index == 0) {
return true; // equivalent to ‘continue&#39; with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});
 
</script>
</body>
</html>

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!