欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery函數(shù)map()和each()介紹及異同點(diǎn)分析

 更新時(shí)間：2014年11月08日 16:47:44   投稿：hebedich  
這篇文章主要介紹了jQuery函數(shù)map()和each()介紹及異同點(diǎn)分析,需要的朋友可以參考下

方法語法：map()

map(callback)
為包裝集中的每一個(gè)元素調(diào)用回調(diào)函數(shù)，并將返回值收集到j(luò)Query對象的實(shí)例中。
參數(shù)
callback （函數(shù)）回調(diào)函數(shù)，為包裝集中的每個(gè)元素調(diào)用該函數(shù)。
比如，下面的代碼將頁面上所有div元素的id值收集到一個(gè)javascript數(shù)組中：

復(fù)制代碼 代碼如下:

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

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

復(fù)制代碼 代碼如下:

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

我們可以得到一個(gè)用逗號分隔的復(fù)選框 ID:

復(fù)制代碼 代碼如下:

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

此調(diào)用的結(jié)果是字符串， "two,four,six".

在回調(diào)函數(shù)中，this指向每次迭代中的當(dāng)前DOM元素。

方法語法：each()

each(iterator)
遍歷匹配集里所有的元素，為每一個(gè)元素調(diào)用傳入的迭代函數(shù)
iterator （函數(shù)）回調(diào)函數(shù)，為匹配集中的每個(gè)元素調(diào)用
each()方法也可以用來遍歷javascript數(shù)組對象甚至單個(gè)對象，舉個(gè)栗子：

復(fù)制代碼 代碼如下:

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

這個(gè)語句會為傳入$()中數(shù)組的每個(gè)元素調(diào)用迭代函數(shù)，函數(shù)中的this指向單獨(dú)的數(shù)組項(xiàng)。

每次回調(diào)函數(shù)執(zhí)行時(shí)，會傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)(從0開始計(jì)數(shù))。更重要的是，回調(diào)函數(shù)是在當(dāng)前DOM元素為上下文的語境中觸發(fā)的。因此關(guān)鍵字 this 總是指向這個(gè)元素。

假設(shè)頁面上有這樣一個(gè)簡單的無序列表。

復(fù)制代碼 代碼如下:

<ul>
<li>foo</li>
<li>bar</li>
</ul>

你可以選中并迭代這些列表：

復(fù)制代碼 代碼如下:

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

列表中每一項(xiàng)會顯示在下面的消息中：

0: foo
1: bar
兩者的區(qū)別

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

each()返回的是原來的數(shù)組，并不會新創(chuàng)建一個(gè)數(shù)組。
map()方法會返回一個(gè)新的數(shù)組。如果在沒有必要的情況下使用map，則有可能造成內(nèi)存浪費(fèi)。

相關(guān)文章

最新評論