jQuery中如何進行遍歷？幾種遍歷方式淺析

jQuery中如何進行遍歷？以下這篇文章就來跟大家分享幾種jQuery遍歷物件的方式，希望對大家有幫助！

jQuery遍歷的幾種方式

#我們都知道js 的遍歷方式為： for(初始化值;迴圈結束條件;步長) 例如：

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

jQuery遍歷大概有以下幾種用法：

#1. jq物件.each(callback) 或選擇器. each(callback)【推薦學習：jQuery影片教學】

callback的回傳值最後再做說明

#1.1. 回呼函數不帶參數(*注意：這種不帶參數的回呼只能取得到集合中的每一個元素對象，而不能取得到對應索引值，且只能透過this來取得物件)

    ->語法： jquery物件.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. 回呼函數帶參數(*可以取得到index索引，且有兩種取得元素物件的方式，如下)

    ->語法：jquery物件.each(function(index,element){});

• index:就是元素在集合中的索引
• element：就是集合中的每一個元素物件
• this：集合中的每一個元素物件

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

#callback的回傳值最後再做說明

#2.1. 回呼函數不帶參數(*與1.1效果類似，只能透過this來取得物件)

    ->語法：$.each(object,function( ){});

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

2.2. 回呼函數帶參數(*可以取得到index索引，與1.2效果類似，寫法不同，如下)

    -> ;語法：$.each(object,function(){index,item});

• #index:就是元素在集合中的索引
• item：就是集合中的每一個元素物件
• this：集合中的每一個元素物件

$.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:  jquery 3.0 版本之後提供的方式 (*了解)

    ->語法：for(元素物件of 容器物件)

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

4. 回呼函數傳回值題（涉及第一第二）：(*補充)

• true:如果目前function回傳為false，則結束迴圈(break) 。
• false:如果目前function回傳為true，則結束本次循環，繼續下次循環(continue)

例如：

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

（學習影片分享：web前端）

以上是jQuery中如何進行遍歷？幾種遍歷方式淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！