jQuery函數(shù)map()和each()介紹及異同點(diǎn)分析
方法語(yǔ)法:map()
map(callback)
為包裝集中的每一個(gè)元素調(diào)用回調(diào)函數(shù),并將返回值收集到j(luò)Query對(duì)象的實(shí)例中。
參數(shù)
callback (函數(shù))回調(diào)函數(shù),為包裝集中的每個(gè)元素調(diào)用該函數(shù)。
比如,下面的代碼將頁(yè)面上所有div元素的id值收集到一個(gè)javascript數(shù)組中:
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>
我們可以得到一個(gè)用逗號(hào)分隔的復(fù)選框 ID:
$(':checkbox').map(function() {
return this.id;
}).get().join();
此調(diào)用的結(jié)果是字符串, "two,four,six".
在回調(diào)函數(shù)中,this指向每次迭代中的當(dāng)前DOM元素。
方法語(yǔ)法:each()
each(iterator)
遍歷匹配集里所有的元素,為每一個(gè)元素調(diào)用傳入的迭代函數(shù)
iterator (函數(shù))回調(diào)函數(shù),為匹配集中的每個(gè)元素調(diào)用
each()方法也可以用來(lái)遍歷javascript數(shù)組對(duì)象甚至單個(gè)對(duì)象,舉個(gè)栗子:
$([a,b,c,d]).each(function(){
alert(this);
})
這個(gè)語(yǔ)句會(huì)為傳入$()中數(shù)組的每個(gè)元素調(diào)用迭代函數(shù),函數(shù)中的this指向單獨(dú)的數(shù)組項(xiàng)。
每次回調(diào)函數(shù)執(zhí)行時(shí),會(huì)傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)(從0開(kāi)始計(jì)數(shù))。更重要的是,回調(diào)函數(shù)是在當(dāng)前DOM元素為上下文的語(yǔ)境中觸發(fā)的。因此關(guān)鍵字 this 總是指向這個(gè)元素。
假設(shè)頁(yè)面上有這樣一個(gè)簡(jiǎn)單的無(wú)序列表。
<ul>
<li>foo</li>
<li>bar</li>
</ul>
你可以選中并迭代這些列表:
$( "li" ).each(function( index ) {
console.log( index + ": "" + $(this).text() );
});
列表中每一項(xiàng)會(huì)顯示在下面的消息中:
0: foo
1: bar
兩者的區(qū)別
map()方法主要用來(lái)遍歷操作數(shù)組和對(duì)象,each()主要用于遍歷jquery對(duì)象。
each()返回的是原來(lái)的數(shù)組,并不會(huì)新創(chuàng)建一個(gè)數(shù)組。
map()方法會(huì)返回一個(gè)新的數(shù)組。如果在沒(méi)有必要的情況下使用map,則有可能造成內(nèi)存浪費(fèi)。
相關(guān)文章
jquery怎樣實(shí)現(xiàn)ajax聯(lián)動(dòng)框(二)
ajax聯(lián)動(dòng)框想必大家早有所耳聞,接下來(lái)將介紹jquery實(shí)現(xiàn)另一種形式的聯(lián)動(dòng)框,右邊的聯(lián)動(dòng)框用jquery生成,仿照上篇的js方法修改的,感興趣的你可以參考下希望可以幫助到你2013-03-03
使用jquery datatable和bootsrap創(chuàng)建表格實(shí)例代碼
這篇文章主要介紹了使用jquery-datatable和bootsrap創(chuàng)建表格的實(shí)例代碼,需要的朋友可以參考下2017-03-03
jQuery實(shí)現(xiàn)可以擴(kuò)展的日歷
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)可以擴(kuò)展的日歷,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12
jQuery插件zTree實(shí)現(xiàn)獲取一級(jí)節(jié)點(diǎn)數(shù)據(jù)的方法
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)獲取一級(jí)節(jié)點(diǎn)數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了jQuery插件zTree針對(duì)節(jié)點(diǎn)的遍歷與獲取操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
jQuery + html + css 實(shí)現(xiàn)王者榮耀官網(wǎng)首頁(yè)效果&nb
這篇文章主要介紹了jQuery + html + css 實(shí)現(xiàn)王者榮耀官網(wǎng)首頁(yè)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02
使用jQuery模板來(lái)展現(xiàn)json數(shù)據(jù)的代碼
通常我們?cè)谑褂胊jax的時(shí)候,都避免不了和json這種輕巧的數(shù)據(jù)格式打交道??墒峭謩?dòng)的去解析json,構(gòu)建HTML,比較麻煩?,F(xiàn)在有了這個(gè)插件,就能像Extjs那樣使用模板解析json了。2010-10-10
詳解Jquery Easyui的驗(yàn)證擴(kuò)展
本文主要介紹了Jquery Easyui驗(yàn)證擴(kuò)展,Easyui驗(yàn)證,Easyui校驗(yàn),js正則表達(dá)式。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01

