.map()

.map( callback(index, domElement) ) Returns: jQuery

Description: Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.

  • version added: 1.2.map( callback(index, domElement) )

    callback(index, domElement)A function object that will be invoked for each element in the current set.

The .map() method is particularly useful for getting or setting the value of a collection of elements. Consider a form with a set of checkboxes in it:

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

We can get a comma-separated list of checkbox IDs:

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

The result of this call is the string, "two,four,six,eight".

Within the callback function, this refers to the current DOM element for each iteration.

Examples:

Example: Build a list of all the values within a form. 

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

<!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 an 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. 

<!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(){
  return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
$('input').click(function(){
  $('div').equalizeHeights();
});

</script>
</body>
</html>

Demo: