jQuery函數map()和each()介紹及異同點分析_jquery

方法語法：map()

map(callback)
為包裝集中的每一個元素呼叫回呼函數，並將傳回值收集到jQuery物件的實例中。
參數
callback （函數）回呼函數，為包裝集中的每個元素呼叫函數。
例如，下面的程式碼將頁面上所有div元素的id值收集到一個javascript數組中：

複製程式碼 程式碼如下:

var iDs = $("div").map(function(){
    return (this.id==undefined) ? null :this.id;
}).get();

再看如下的表單中包含的一組 checkbox 框：

複製程式碼 程式碼如下:

2

4

6

8

我們可以得到一個用逗號分隔的複選框 ID:

複製程式碼 程式碼如下:

$(':checkbox').map(function() {
return this.id;
}).get().join();

此呼叫的結果是字串， "two,four,six".

在回呼函數中，this指向每次迭代中的目前DOM元素。

方法語法：each()

each(iterator)
遍歷匹配集裡所有的元素，為每個元素呼叫傳入的迭代函數
iterator （函數）回呼函數，為匹配集中的每個元素呼叫
each()方法也可以用來遍歷javascript數組物件甚至單一對象，舉個栗子：

複製程式碼 程式碼如下:

$([a,b,c,d]).each(function(){
    alert(this);
})

這個語句會為傳入$()中陣列的每個元素呼叫迭代函數，函數中的this指向單獨的陣列項目。

每次回呼函數執行時，會傳遞目前循環次數作為參數(從0開始計數)。更重要的是，回呼函數是在當前DOM元素為上下文的語境中觸發的。因此關鍵字 this 總是指向這個元素。

假設頁面上有這樣一個簡單的無序列表。

複製程式碼 程式碼如下:

• foo


• bar

你可以選取並迭代這些清單：

複製程式碼 程式碼如下:

$( "li" ).each(function( index ) {
console.log( index ": "" $(this).text() );
});

清單中每一項會顯示在下面的訊息中：

0: foo
1: bar
兩者的差別

map()方法主要用來遍歷操作數組和對象，each()主要用於遍歷jquery對象。

each()傳回的是原來的數組，並不會新建立一個數組。
map()方法會傳回一個新的陣列。如果在沒有必要的情況下使用map，則有可能造成記憶體浪費。