1. 程式人生 > >jQuery函式map()和each()介紹及異同點分析

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

方法語法:map()

map(callback)
為包裝集中的每一個元素呼叫回撥函式,並將返回值收集到jQuery物件的例項中。
引數
callback (函式)回撥函式,為包裝集中的每個元素呼叫該函式。
比如,下面的程式碼將頁面上所有div元素的id值收集到一個javascript陣列中:

複製程式碼程式碼如下:
var iDs = $("div").map(function(){
    return (this.id==undefined) ? null :this.id;
}).get();

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

複製程式碼程式碼如下:
<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="text" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>

我們可以得到一個用逗號分隔的複選框 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 總是指向這個元素。

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

複製程式碼程式碼如下:
<ul>
<li>foo</li>
<li>bar</li>
</ul>

你可以選中並迭代這些列表:

複製程式碼程式碼如下:
$( "li" ).each(function( index ) {
console.log( index + ": "" + $(this).text() );
});

列表中每一項會顯示在下面的訊息中:

0: foo
1: bar 
兩者的區別

map()方法主要用來遍歷運算元組和物件,each()主要用於遍歷jquery物件。

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