jQuery 遍歷 - map() 方法

jQuery 遍歷參考手冊

實例

構建表單中所有值的列表：

$("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，則不會插入任何元素。

jQuery 遍歷參考手冊