站長資訊網(wǎng)
用法：1、用于將元素通過函數(shù)傳遞到集合中，生成新的jQuery對象，語法為“.map(callback(index,domElement))”；2、用于處理數(shù)組中的元素并將結(jié)果封裝為新數(shù)組返回，語法為“$.map(數(shù)組或?qū)ο?指定函數(shù))”。
本教程操作環(huán)境：windows10系統(tǒng)、jquery3.2.1版本、Dell G3電腦。
map在jquery中的用法
1、map() 把每個元素通過函數(shù)傳遞到當(dāng)前匹配集合中，生成包含返回值的新的 jQuery 對象。
語法
.map(callback(index,domElement))
callback(index,domElement) 對當(dāng)前集合中的每個元素調(diào)用的函數(shù)對象。
由于返回值是 jQuery 封裝的數(shù)組，使用 get() 來處理返回的對象以得到基礎(chǔ)的數(shù)組。
示例如下：
<!DOCTYPE html> <html> <head> <style>p { color:red; }</style> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <p><b>Values: </b></p> <form> <input type="text" name="name" value="John"/> <input type="text" name="password" value="password"/> <input type="text" name="url" value="http://php.cn/"/> </form> <script> $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); </script> </body> </html>
輸出結(jié)果：
2、$.map() 函數(shù)用于使用指定函數(shù)處理數(shù)組中的每個元素(或?qū)ο蟮拿總€屬性)，并將處理結(jié)果封裝為新的數(shù)組返回。
在jQuery 1.6 之前，該函數(shù)只支持遍歷數(shù)組；從 1.6 開始，該函數(shù)也支持遍歷對象。
map()還會為函數(shù)傳入兩個參數(shù)：其一是當(dāng)前迭代的元素或?qū)傩灾?，其二是?dāng)前迭代項(xiàng)的數(shù)組索引或?qū)ο髮傩悦?/p>
該函數(shù)返回值將作為結(jié)果數(shù)組中的一個元素，如果返回值為null或undefined，則不會被添加到結(jié)果數(shù)組中。
$.map( object, callback )
object Array/Object類型 指定的需要處理的數(shù)組或?qū)ο蟆?/p>
callback Function類型 指定的處理函數(shù)。
示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> div { color:blue; } p { color:green; margin:0; } span { color:red; } </style> <script src="js/jquery.min.js"></script> </head> <body> <div></div> <p></p> <span></span> <script> $(function () { var arr = [ "a", "b", "c", "d", "e" ]; $("div").text(arr.join(", ")); arr = $.map(arr, function(n, i){ return (n.toUpperCase() + i); }); $("p").text(arr.join(", ")); arr = $.map(arr, function (a) { return a + a; }); $("span").text(arr.join(", ")); }) </script> </body> </html>
輸出結(jié)果：
相關(guān)視頻教程推薦：jQuery視頻教程
