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

jQuery遍歷的幾種方式

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

 for (var i = 0; i < 3; i++) {//迴圈體}

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

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

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

（學習視訊分享：）

以上就是jQuery中如何進行遍歷？幾種遍歷方式淺析的詳細內容，更多請關注TW511.COM其它相關文章！