站長資訊網
用法：1、用于將元素通過函數傳遞到集合中，生成新的jQuery對象，語法為“.map(callback(index,domElement))”；2、用于處理數組中的元素并將結果封裝為新數組返回，語法為“$.map(數組或對象,指定函數)”。
本教程操作環境：windows10系統、jquery3.2.1版本、Dell G3電腦。
map在jquery中的用法
1、map() 把每個元素通過函數傳遞到當前匹配集合中，生成包含返回值的新的 jQuery 對象。
語法
.map(callback(index,domElement))
callback(index,domElement) 對當前集合中的每個元素調用的函數對象。
由于返回值是 jQuery 封裝的數組，使用 get() 來處理返回的對象以得到基礎的數組。
示例如下：
<!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>
輸出結果：
2、$.map() 函數用于使用指定函數處理數組中的每個元素(或對象的每個屬性)，并將處理結果封裝為新的數組返回。
在jQuery 1.6 之前，該函數只支持遍歷數組；從 1.6 開始，該函數也支持遍歷對象。
map()還會為函數傳入兩個參數：其一是當前迭代的元素或屬性值，其二是當前迭代項的數組索引或對象屬性名。
該函數返回值將作為結果數組中的一個元素，如果返回值為null或undefined，則不會被添加到結果數組中。
$.map( object, callback )
object Array/Object類型 指定的需要處理的數組或對象。
callback Function類型 指定的處理函數。
示例如下：
<!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>
輸出結果：
相關視頻教程推薦：jQuery視頻教程
