JQuery中$.each 和$(selector).each()的區別詳解

目錄

?? 1、$(selector).each()
?? 2、$.each()

1、$(selector).each()

jQuery 遍歷 - each() 方法主要用於DOM遍歷，

each() 方法規定為每個匹配元素規定運行的函數。

語法：

$(selector).each(function(index,element))

W3School上顯示回調函數是必須的，index - 選擇器的 index 位置，element - 當前的元素（也可使用 "this" 選擇器）

對於這個方法，在dom處理上面用的較多。

如果頁面有多個input標簽類型為checkbox，對於這時用$().each來處理多個checkbook，例如：

$(“input[name=’ch’]”).each(function(i){
    if($(this).attr(‘checked’)==true) {
        //一些操作代碼
    }
})

2、$.each()

在數組等數據處理上比較好用

對於jQuery對象，只是把each方法簡單的進行了委托：把jQuery對象作為第一個參數傳遞給jQuery的each方法.換句話說：jQuery提供的each方法是對參數一提供的對象的中所有的子元素逐一進行方法調用。

each()函數是基本上所有的框架都提供了的一個工具類函數，通過它，你可以遍歷對象、數組的屬性值並進行處理。jQuery和jQuery對象都實 現了該方法，對於jQuery對象，只是把each方法簡單的進行了委托：把jQuery對象作為第一個參數傳遞給jQuery的each方法.換句話 說：jQuery提供的each方法是對參數一提供的對象的中所有的子元素逐一進行方法調用。而jQuery對象提供的each方法則是對jQuery內 部的子元素進行逐個調用。

each函數根據參數的類型實現的效果不完全一致：

1、遍歷對象(有附加參數)：

$.each(Object, function(p1, p2) {
      
 
this;       //這裏的this指向每次遍歷中Object的當前屬性值
      p1; p2;     //訪問附加參數
 }, [‘參數1‘, ‘參數2‘]);
 

2、遍歷數組(有附件參數)：

$.each(Array, function(p1, p2){
      this;       //這裏的this指向每次遍歷中Array的當前元素
      p1; p2;     //訪問附加參數
 }, [‘參數1‘, ‘參數2‘]);
 

3、遍歷對象(沒有附加參數)

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

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

下面提一下jQuery的each方法的幾種常用的用法實例：

        
        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
// -------------------------------------------------------    

JQuery中$.each 和$(selector).each()的區別詳解