# .map()

所属分类：遍历 > 过滤 英文文档：.map()

## .map( callback(index, domElement) )返回: jQuery

描述: 通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象。

- #### 添加的版本: 1.2.map( callback(index, domElement) )

  - callback(index, domElement)
    类型: Function()
    一个函数对象，会在处理集合中的每个元素时被调用。

如果你想处理一个简单的数组或对象中，使用jQuery.map()代替。

由于返回值是一个jQuery包裹的数组，所以通常会使用`get()`方法将其转换成普通的数组。

`.map()`方法特别适用于获取或设置元素集合中的值。例如，如下的表单中包含一组 checkbox 框：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
    <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`:

1 2 3 |
    $(':checkbox').map(function() {      return this.id;    }).get().join();

此调用的结果是字符串， `"two,four,six,eight"`.

在回调函数中，`this`指向每次迭代中的当前DOM元素。该函数可以返回一个单独的数据或数据数组，并在结果集合中插入。如果数组返回，数组中的元素插入到集合。如果函数返回`null`或`undefined` ，没有元素将被插入。

## 例子:

#### Example: 获取表单中所有表单元素的值。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
    <!DOCTYPE html><html><head>  <style>  p { color:red; }  </style>  <script src="https://code.jquery.com/jquery-latest.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://ejohn.org/"/>   </form><script>    $("p").append( $("input").map(function(){      return $(this).val();    }).get().join(", ") );</script> </body></html>

#### Demo:

#### Example: A contrived example to show some functionality.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
    <!DOCTYPE html><html><head>  <style>  body { font-size:16px; }  ul { float:left; margin:0 30px; color:blue; }  #results { color:red; }  </style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <ul>    <li>First</li>    <li>Second</li>    <li>Third</li>     <li>Fourth</li>    <li>Fifth</li>  </ul>  <ul id="results">   </ul><script>var mappedItems = $("li").map(function (index) {  var replacement = $("<li>").text($(this).text()).get(0);  if (index == 0) {    /* make the first item all caps */    $(replacement).text($(replacement).text().toUpperCase());  } else if (index == 1 || index == 3) {    /* delete the second and fourth items */    replacement = null;  } else if (index == 2) {    /* make two of the third item and add some text */    replacement = [replacement,$("<li>").get(0)];    $(replacement[0]).append("<b> - A</b>");    $(replacement[1]).append("Extra <b> - B</b>");  }   /* replacement will be a dom element, null,     or an array of dom elements */  return replacement;});$("#results").append(mappedItems); </script> </body></html>

#### Demo:

#### Example: Equalize the heights of the divs.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
    <!DOCTYPE html><html><head>  <style>div { width: 40px; float:left; }input { clear:left}  </style>  <script src="https://code.jquery.com/jquery-latest.js"></script></head><body>  <input type="button" value="equalize div heights"> <div style="background:red; height: 40px; "></div><div style="background:green; height: 70px;"></div><div style="background:blue; height: 50px; "></div>  <script>$.fn.equalizeHeights = function() {  var maxHeight = this.map(function(i,e) {    return $(e).height();  }).get();   return this.height( Math.max.apply(this, maxHeight) );}; $('input').click(function(){  $('div').equalizeHeights();}); </script> </body></html>

#### Demo: