Jquery中map函數(shù)的用法

更新時間：2016年06月03日 09:21:30 作者：追夢人hqh

這篇文章主要介紹了Jquery中map函數(shù)的用法的相關(guān)資料，map()這個函數(shù)可以用在不同的地方，非常實用，感興趣的朋友參考下吧

很久沒用map()這個函數(shù)了，由于最近看一篇react的文章，其中有談到map()這個函數(shù)，于是就重新查了一些資料，發(fā)現(xiàn)map()函數(shù)可以用在不同的地方，下面小編總結(jié)具有內(nèi)容分享給大家，也方便今后查找。

其實，本人一直很少用map（）這個函數(shù)，因為最近看一篇React的文章，其實有談及map（）函數(shù)，于是自己也重新查了一些資料，發(fā)現(xiàn)map（）函數(shù)也可以用在不同的地方：

map()函數(shù)把每個元素通過函數(shù)傳遞到當前匹配集合中，生成包含返回值的新的Jquery對象

語法：.map(callback(index,domElement))

callback(index,domElment)》》》》對當前集合中每個元素調(diào)用的函數(shù)對象；

如：

<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;});

解釋：

console.log(i,val);

打印如圖所示：

console.log( typeof result) // ---當然，如果打印這個result類型是object對象；
Anyway,It is ok!let us go on!

由于返回值是jquery封裝的數(shù)組，那么我們使用get（）來處理返回的對象以得到基礎(chǔ)的數(shù)組；

PS：而get()方法獲得由選擇器指定的Dom元素語法如下：

$(selector).get(index);index:可選。規(guī)定的獲取哪個匹配元素(通過index編號)；

那么，代碼繼續(xù)：

var result=$("ul li").map(function(i,val){ 
console.log(i,val); 
return this.id;});console.log( typeof result) // ---objectconsole.log(result.get());

這個時候，result.get()會得到如圖結(jié)果：

PS:它會得到一維數(shù)組，可能有些情況下大家會需要得到這樣的效果，只要在適當?shù)臅r候用get（）方法就可以了！

當然，我們可以連上拼接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引用每次迭代的當前DOM元素。該函數(shù)可返回單獨的數(shù)據(jù)項，或者是要被插入結(jié)果集中的數(shù)據(jù)項的數(shù)組。如果返回的是數(shù)組，數(shù)組內(nèi)的元素會被插入其中。如果函數(shù)返回null或者undefined，則不會插入任何元素。

以上所述是小編給大家介紹的Jquery中map函數(shù)的用法，希望對大家大家有所幫助！

您可能感興趣的文章: