實例 構建表單中所有值的列表： ~~~ $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); ~~~ "親自試一試" 定義和用法 map() 把每個元素通過函數傳遞到當前匹配集合中 ...
實例
構建表單中所有值的列表：
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
定義和用法
map() 把每個元素通過函數傳遞到當前匹配集合中，生成包含返回值的新的 jQuery 對象。
語法
.map(callback(index,domElement))| 參數 | 描述 |
|---|---|
| callback(index,domElement) | 對當前集合中的每個元素調用的函數對象。 |
詳細說明
由於返回值是 jQuery 封裝的數組，使用 get() 來處理返回的對象以得到基礎的數組。
.map() 方法對於獲得或設置元素集的值特別有用。請思考下麵這個帶有一系列覆選框的表單：
<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="checkbox" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>
我們能夠獲得覆選框 ID 組成的逗號分隔的列表：
$(':checkbox').map(function() {
return this.id;
}).get().join(',');
本次調用的結果是字元串："two,four,six,eight"。
在 callback函數內部，this 引用每次迭代的當前 DOM 元素。該函數可返回單獨的數據項，或者是要被插入結果集中的數據項的數組。如果返回的是數組，數組內的元素會被插入集合中。如果函數返回 null 或 undefined，則不會插入任何元素。
文章轉自：https://www.w3school.com.cn/jquery/traversing_map.asp
更多例子參考：https://www.runoob.com/jquery/misc-map.html
