Jquery中map函數(shù)的用法
很久沒(méi)用map()這個(gè)函數(shù)了,由于最近看一篇react的文章,其中有談到map()這個(gè)函數(shù),于是就重新查了一些資料,發(fā)現(xiàn)map()函數(shù)可以用在不同的地方,下面小編總結(jié)具有內(nèi)容分享給大家,也方便今后查找。
其實(shí),本人一直很少用map()這個(gè)函數(shù),因?yàn)樽罱匆黄猂eact的文章,其實(shí)有談及map()函數(shù),于是自己也重新查了一些資料,發(fā)現(xiàn)map()函數(shù)也可以用在不同的地方:
map()函數(shù)把每個(gè)元素通過(guò)函數(shù)傳遞到當(dāng)前匹配集合中,生成包含返回值的新的Jquery對(duì)象
語(yǔ)法:.map(callback(index,domElement))
callback(index,domElment)》》》》對(duì)當(dāng)前集合中每個(gè)元素調(diào)用的函數(shù)對(duì)象;
如:
<html> <ul> <li id="num1"> <p>你好</p> </li> <li id="num2"> <p>你好</p> </li> <li id="num3"> <p>你好</p> </li> </ul> </html>
js:
var result=$("ul li").map(function(i,val){ console.log(i,val);// return this.id;});
解釋?zhuān)?/p>
console.log(i,val);
打印如圖所示:
console.log( typeof result) // ---當(dāng)然,如果打印這個(gè)result類(lèi)型是object對(duì)象; Anyway,It is ok!let us go on!
由于返回值是jquery封裝的數(shù)組,那么我們使用get()來(lái)處理返回的對(duì)象以得到基礎(chǔ)的數(shù)組;
PS:而get()方法獲得由選擇器指定的Dom元素語(yǔ)法如下:
$(selector).get(index);index:可選。規(guī)定的獲取哪個(gè)匹配元素(通過(guò)index編號(hào));
那么,代碼繼續(xù):
var result=$("ul li").map(function(i,val){ console.log(i,val); return this.id;});console.log( typeof result) // ---objectconsole.log(result.get());
這個(gè)時(shí)候,result.get()會(huì)得到如圖結(jié)果:
PS:它會(huì)得到一維數(shù)組,可能有些情況下大家會(huì)需要得到這樣的效果,只要在適當(dāng)?shù)臅r(shí)候用get()方法就可以了!
當(dāng)然,我們可以連上拼接join()方法抽離數(shù)組;
var result=$("ul li").map(function(i,val){ console.log(i,val); return this.id;});console.log( typeof result) // ---objectconsole.log(result.get()); console.log(result.get().join(','))
如圖:
最后,總結(jié)一些:在callback函數(shù)內(nèi)部,this引用每次迭代的當(dāng)前DOM元素。該函數(shù)可返回單獨(dú)的數(shù)據(jù)項(xiàng),或者是要被插入結(jié)果集中的數(shù)據(jù)項(xiàng)的數(shù)組。如果返回的是數(shù)組,數(shù)組內(nèi)的元素會(huì)被插入其中。如果函數(shù)返回null或者undefined,則不會(huì)插入任何元素。
以上所述是小編給大家介紹的Jquery中map函數(shù)的用法 ,希望對(duì)大家大家有所幫助!
相關(guān)文章
javascript中對(duì)Attr(dom中屬性)的操作示例講解
這篇文章主要是對(duì)javascript中對(duì)Attr(dom中屬性)的操作進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12jquery 實(shí)現(xiàn)窗口的最大化不論什么情況
無(wú)論瀏覽器處于什么樣的設(shè)置,都要讓這個(gè)彈出的窗口最大化,那么怎么辦呢?下面為大家介紹下讓瀏覽器窗口從默認(rèn)大小變成我們自己的設(shè)置2013-09-09JQuery EasyUI 對(duì)話(huà)框的使用方法
jQuery EasyUI 對(duì)話(huà)框(Dialog)用法與EasyUI的窗口用法極為相似,最終的效果圖也只與窗口的效果圖差幾個(gè)按鈕2010-10-10EasyUI Combobox設(shè)置默認(rèn)值 獲取text的方法
這篇文章主要介紹了EasyUI Combobox設(shè)置默認(rèn)值 獲取text的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11jQuery下通過(guò)$.browser來(lái)判斷瀏覽器.
用jQuery來(lái)判斷瀏覽器的類(lèi)型,主要是使用$.browser這個(gè)工具類(lèi)2011-04-04