Maison > Article > interface Web > Comment utiliser $.each dans JQuery et la différence avec $(selector).each()
Comment utiliser $.each dans JQuery et la différence avec $(selector).each()
- 伊谢尔伦original
- 2017-06-17 14:37:47920parcourir
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]);
});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>//输出 0: 52 1: 97
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': ‘inflammable',
‘duh': ‘no duh'
};
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
});
</script>
</body>
</html>//输出 flammable: inflammable duh: no duh
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>// 输出 Mine is one. – 1 Mine is two. – 2 Mine is three. – 3 - 4 - 5
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( ['a','b','c'], function(i, l){
alert( “Index #” + i + “: ” + l );
});
</script>
</body>
</html>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>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' with a normal for loop
}
// else do stuff…
alert (index + “: “+ value);
});
</script>
</body>
</html>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!