jQuery - map( callback ) Method



The map( callback ) method translates a set of elements in the jQuery object into another set of values in a jQuery array which may, or may not contain elements.

You could use this method to build lists of values, attributes, css values - or even perform special, custom, selector transformations.


Here is the simple syntax to use this method:

selector.map( callback )


Here is the description of all the parameters used by this method:

  • callback: The function to execute on each element in the set.


Following is a simple example a simple showing the usage of this method:

<title>The jQuery Example</title>
   <script type="text/javascript" 
   <script type="text/javascript" language="javascript">
      var mappedItems = $("li").map(function (index) {
      var replacement = $("<li>").text($(this).text()).get(0);
      if (index == 0) {
        // make the first item all caps
      } 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;

     body { font-size:16px; }
     ul { float:left; margin:0 30px; color:blue; }
     #results { color:red; }
  <ul id="results">