jQuery 遍歷 map() 方法

jQuery 參考手冊 遍歷

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

1. 語法

.map(callback(index,domElement))

由于返回值是 jQuery 封裝的數(shù)組，使用 get() 來處理返回的對象以得到基礎(chǔ)的數(shù)組。

.map() 方法對于獲得或設(shè)置元素集的值特別有用。請思考下面這個帶有一系列復(fù)選框的表單：

<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>

我們能夠獲得復(fù)選框 ID 組成的逗號分隔的列表：

$(':checkbox').map(function() {
  return this.id;
}).get().join(',');

本次調(diào)用的結(jié)果是字符串："two,four,six,eight"。

在 callback 函數(shù)內(nèi)部，this 引用每次迭代的當(dāng)前 DOM 元素。該函數(shù)可返回單獨的數(shù)據(jù)項，或者是要被插入結(jié)果集中的數(shù)據(jù)項的數(shù)組。如果返回的是數(shù)組，數(shù)組內(nèi)的元素會被插入集合中。如果函數(shù)返回 null 或 undefined，則不會插入任何元素。

2. 范例

構(gòu)建表單中所有值的列表：

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

jQuery 參考手冊 遍歷