How to traverse in jQuery? A brief analysis of several traversal methods

How to traverse in jQuery? The following article will share with you several ways of jQuery traversing objects. I hope it will be helpful to everyone!

Several ways of jQuery traversal

We all know that the js traversal method is: for (initialization value; loop end condition ; step size) For example:

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

jQuery traversal has the following usages:

1. jq object.each(callback) or selector. each(callback)[Recommended learning: jQuery video tutorial]

The return value of callback will be explained at the end

1.1. The callback function takes no parameters (*Note: This kind of callback without parameters can only obtain each element object in the collection, but cannot obtain the corresponding index value, and can only be obtained through this. Get the object)

->Syntax: 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. Callback function with parameters (*can be obtained index index, and there are two ways to obtain element objects, as follows)

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

• index: is the index of the element in the collection
• element: is each element object in the collection
• this: is each element object in the collection

//实例
  $("#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])

The return value of callback will be explained at the end

2.1. The callback function takes no parameters (*The effect is similar to 1.1, the object can only be obtained through this)

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

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

2.2. Callback function with parameters (*You can get the index index, the effect is similar to 1.2, but the writing method is different, as follows)

-> ;Syntax: $.each(object,function(){index,item});

• index: is the index of the element in the collection
• item: is each item in the collection An element object
• this: Each element object in the 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. for…of: Method provided after jquery 3.0 version (*Understand)

->Syntax: for(element object of container object)

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

4. The callback function returns Value issues (involving the first and second): (*Supplementary)

• true: If the current function returns false, end the loop (break) .
• false: If the current function returns true, end this loop and continue the next loop (continue)

For example:

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

(Learning video sharing ：webfrontend）

The above is the detailed content of How to traverse in jQuery? A brief analysis of several traversal methods. For more information, please follow other related articles on the PHP Chinese website!