返回值:jQuerymap(callback(index, domElement))

通过一个回调函数来处理匹配集合中的每个元素，将处理后的结果生成一个新的 jQuery 对象。

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

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

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

我们可以得到一个用逗号分隔的 checkbox 的 ID 字符串: 

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

上述代码的结果如下： "two,four,six,eight"。

在回调函数里，this 指向当前正在循环的 DOM 元素。该函数可以返回一个独立的数据或是一个数组，用于插入到结果集中。如果返回的是数组，数组中的元素会被插入到集合中。如果返回的是 null 或 undefined，则不会插入任何元素。

示例:

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

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:red; }
  </style>
<script src="jquery.min.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>

演示:

示例:

下面的例子展现了该方法的一些功能。

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-size:16px; }
  ul { float:left; margin:0 30px; color:blue; }
  #results { color:red; }
  </style>
<script src="jquery.min.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>

演示:

示例:

使 div 的高度相同。

<!DOCTYPE html>
<html>
<head>
<style>
div { width: 40px; float:left; }
input { clear:left}
  </style>
<script src="jquery.min.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>

演示: