Instructions pour utiliser each() dans JQuery

Pour l'objet 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 pour l'objet fourni par le paramètre un. Tous les sous-éléments de la méthode sont appelés un par un. La fonction

each() est une fonction outil fournie par pratiquement tous les frameworks, vous pouvez parcourir des objets et des tableaux. attribuer la valeur et la 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.

L'effet de chaque fonction n'est pas totalement cohérent selon le type de paramètres :

Parcourir des objets (avec des paramètres supplémentaires)

Le le code est le suivant :

$.each(Object, function(p1, p2) {
     this;       //这里的this指向每次遍历中Object的当前属性值
     p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

2. Parcourir le tableau (avec les paramètres de pièce jointe)

Le code est le suivant :

$.each(Array, function(p1, p2){
     this;       //这里的this指向每次遍历中Array的当前元素
     p1; p2;     //访问附加参数
}, ['参数1', '参数2']);

3. Traverser des objets (pas de paramètres supplémentaires)

Le code est le suivant :

$.each(Object, function(name, value) {
     this;      //this指向当前属性的值
     name;      //name表示Object当前属性的名称
     value;     //value表示Object当前属性的值
});

4. (pas de paramètres supplémentaires)

Le code est le suivant :

$.each(Array, function(i, value) {
     this;      //this指向当前元素
     i;         //i表示Array当前下标
     value;     //value表示Array当前元素
});

Voici quelques utilisations courantes de la méthode each de jQuery

var arr = [ "one", "two", "three", "four"];  
 $.each(arr, function(){  
 alert(this);  
 });  
//上面这个each输出的结果分别为：one,two,three,four  
  
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]  
$.each(arr1, function(i, item){  
 alert(item[0]);  
});  
//其实arr1为一个二维数组，item相当于取每一个一维数组，  
//item[0]相对于取每一个一维数组里的第一个值  
//所以上面这个each输出分别为：1 4 7  
 
 
var obj = { one:1, two:2, three:3, four:4};  
$.each(obj, function(key, val) {  
 alert(obj[key]);    
});  
//这个each就有更厉害了，能循环每一个属性  
//输出结果为：1 2 3 4

La fonction each dans JQuery est décrite dans la documentation officielle de 1.3.2 comme suit :

each(callback)

Prenez chaque élément correspondant comme contexte pour exécuter une fonction.

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 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 leur attribut src. Remarque : ici, il s'agit de l'objet DOM plutôt que de l'objet jQuery.

Code HTML :

Le code est le suivant :

<img/><img/>jQuery 代码: 
$("img").each(function(i){ 
this.src = "test" + i + ".jpg"; 
});

Résultat : [ 3aea8968b3b2aa1ea131ed451e23e3c6, 9b5906d777c3e5ae0f60d33152154aa9 ]
Bien sûr, jquery permet des fenêtres contextuelles personnalisées lors du parcours des éléments. Veuillez consulter l'exemple de code : vous pouvez utiliser 'return' pour sortir de chacun. () cycle à l’avance.
Code HTML :

Le code est le suivant :

<button>Change colors</button> 
<span></span> 
<p></p> 
<p></p> 
<p></p> 
<p></p> 
<p id="stop">Stop here</p> 
<p></p> 
<p></p> 
<p></p>

Code jQuery :

Le code est le suivant :

$("button").click(function(){ 
$("p").each(function(index,domEle){ 
$(domEle).css("
background
Color","wheat"); 
if($(this).is("#stop")){ 
$("span").text("在p块为#"+index+"的地方停止。"); 
return false; 
} 
});

Ou écrivez comme ceci :

Le code est le suivant :

$("button").click(function(){ 
$("p").each(function(index){ 
$(this).css("backgroundColor","wheat"); 
if($(this).is("#stop")){ 
$("span").text("在p块为#"+index+"的地方停止。"); 
return false; 
} 
});

Illustration :


each La méthode () 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"

instance
pour afficher le texte de chaque élément li :

Copier le code Le code est le suivant :

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

Instance

L'objet obj n'est pas un tableau La plus grande différence entre cette méthode et 1 est que la méthode fn sera exécutée une par une quelle que soit la valeur de retour En d'autres termes, toutes les propriétés. de l'objet obj sera appelé par la méthode fn, même si fn est utilisé. La fonction renvoie false Les paramètres transmis sont similaires à 1.

Copier le codeLe. le code est le suivant :

jQuery.each=function( obj, fn, args ) {
if ( args ) {
if ( obj.length == undefined ){
for ( var i in obj )
fn.apply( obj, args );
}else{
for ( var i = 0, ol = obj.length; i < ol; i++ ) {
if ( fn.apply ( obj, args ) === false )
break;
}
}
} else {
if ( obj.length == undefined ) {
for ( var i in obj )
fn.call( obj, i, obj );
}else{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){}
}
}
return obj;

Il est à noter que la méthode d'appel spécifique de fn dans chaque méthode n'est pas simple fn(i,val) ou fn(args), mais fn.call(val,i,val) Ou sous la forme de fn.apply(obj.args), ce qui signifie que dans votre propre implémentation de fn, vous pouvez directement utiliser ce pointeur pour référencer les sous-éléments du tableau ou de l'objet.

Ensuite, comment sortir de chacun

Il est plus pratique d'utiliser chacun lorsque jquery parcourt l'objet sélectionné. Il existe une application qui doit sortir de cette boucle après avoir trouvé un objet qui remplit les conditions. Pour sortir d'une boucle JavaScript, break est généralement utilisé. Lorsqu'un collègue a rencontré ce problème, il a inconsciemment utilisé break pour sortir de la boucle. Le résultat est une erreur
SyntaxError: unlabeled break must be inside loop or switch
Après enquête, vous devez utiliser un
pour renvoyer false dans la fonction de rappel La plupart des méthodes jq sont comme ça



Copier le code
Le code est le suivant :

Renvoyer 'false' arrêtera la boucle (tout comme utiliser 'break' dans une boucle normale) . Renvoyer 'true' pour passer à la boucle suivante (tout comme utiliser 'continue' dans une boucle normale).

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!