Comment parcourir en jQuery ? Une brève analyse de plusieurs méthodes de traversée

Comment parcourir en jQuery ? L'article suivant partagera avec vous plusieurs façons jQuery de parcourir des objets. J'espère qu'il vous sera utile !

Plusieurs façons de parcourir jQuery

Nous savons tous que la méthode de traversée js est : for (valeur d'initialisation ; condition de fin de boucle ; taille du pas) Par exemple :

 for (var i = 0; i < 3; i++) {//循环体}

la traversée jQuery a les utilisations suivantes :

1. jq object.each(callback) ou selector.each(callback)[Apprentissage recommandé : Tutoriel vidéo jQuery]

La valeur de retour du rappel sera expliquée à la fin

1.1. La fonction de rappel ne prend pas de paramètres (*Remarque : ce type de rappel sans paramètres ne peut obtenir que chaque objet élément de la collection, mais pas la valeur d'index correspondante, et l'objet ne peut être obtenu que via cela)

-> Syntaxe : jquery object.each(function(){});

//html
<ul id="course">
    <li>js</li>
    <li>java</li>
    <li>C++</li>
    <li>jq</li>
</ul>

//实例
$("button").click(function(){
  $("#course li").each(function(){
    alert($(this).html());//jq获取方式
    alert(this.innerHTML);//js获取方式
  });
});

1.2. Fonction de rappel avec paramètres (*Vous pouvez obtenir l'index, et il existe deux façons d'obtenir l'objet élément, comme suit)

->Syntaxe : jquery object.each(function(index,element){});

• index : est l'index de l'élément de la collection
• element : est chaque élément objet de la collection
• this : dans la collection Chaque élément objet de

//实例
  $("#course li").each(function (index, item) {
			//3.1 获取 li对象 第一种方式 this
            //alert(this.innerHTML);//js获取
            //alert($(this).html());//jq获取
            /*3.2 获取 li对象 第二种方式
             在回调函数中定义参数 index（索引）item（元素对象）*/
           // alert(index+":"+item.innerHTML);
            alert(index+":"+$(item).html());
}

2 jQuery.each(object, [callback])

La valeur de retour du rappel sera expliquée à la fin

2.1. la fonction de rappel ne prend pas de paramètres (* et 1.1 L'effet est similaire, l'objet ne peut être obtenu que par cela)

-> Syntaxe : $.each(object, function(){});

$.each($("#course li"),function () {
              //alert($(this).html());//jq获取方式
   			  alert(this.innerHTML);//js获取方式
         });

2.2 . Fonction de rappel avec paramètres (*Vous pouvez obtenir l'index, similaire à 1.2, mais écrit différemment, comme suit)

->

index : est l'index de l'élément dans la collection
• item : C'est chaque objet élément de la collection
• this : Chaque objet élément de la collection

• $.each($("#course li"),function (index,item) {
               //3.1 获取 li对象 第一种方式 this
             // alert(this.innerHTML);//js获取
             // alert($(this).html());//jq获取
              /*3.2 获取 li对象 第二种方式
               在回调函数中定义参数 index（索引）item（元素对象）*/
              //alert(index+":"+item.innerHTML);
              alert(index+":"+$(item).html());
           });

3 pour…de : La méthode fournie. après la version jquery 3.0(*comprendre)

​ - > Syntaxe : for (objet élément de l'objet conteneur)

   for (li of $("#course li")) {
            alert($(li).html());
        }

4. *Supplément)

true : Si la fonction actuelle renvoie false, alors la boucle se termine (pause).

• false : Si la fonction actuelle renvoie vrai, terminez cette boucle et continuez la boucle suivante (continuer)
• Par exemple :

  $.each($("#course li"), function (index, item) {
            //判断如果是java，则结束循环
            if ("java" == $(item).html()) {
                //如果当前function返回为false，则结束循环(break)。
                //如果返回为true，则结束本次循环，继续下次循环(continue)
                return false;	
            }
            alert($(this).html());//此时前端页面只会弹出第一个值js
        });
        
  $.each($("#course li"), function (index, item) {
            //判断如果是java，则结束循环
            if ("java" == $(item).html()) {
                //如果当前function返回为false，则结束循环(break)。
                //如果返回为true，则结束本次循环，继续下次循环(continue)
                return true;	
            }
            alert($(this).html());//此时前端页面会依次弹出js,C++jq,不会弹出java
        });

(Partage de vidéos d'apprentissage :

front-end web

)

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!