.map()

Syntax and Description

.map(callback)

passes each element in the current matched set through a function, produces a new jQuery object containing the return values.

callback is a function object that will be invoked for each element in the current set

Return value is the new jQuery object.

Map each list item

The following code uses the map method to loop through list items and convert its value to uppercase. Finally output the value to another list


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w  w w. j  a v  a  2s  .  c  om-->
           var mappedItems = $("li").map(function (index) {
              var data = $("<li>").text($(this).text()).get(0);
              $(data).text($(data).text().toUpperCase());
              return data;
           });
           $("#results").append(mappedItems);
        });
    </script>
  </head>
  <body>
    <body>
      <ul>
        <li>ja va2s.com</li>
        <li>java 2s.com</li>
        <li>java2 s.com</li>
      </ul>
      <ul id="results">
      </ul>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.map()

Join the tag name with map function

The following code uses map function to get the tag name.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
          $(document).ready(function(){<!--from w  w w . j  a v a 2 s.co  m-->

            var list = $("div,p").map(function () {
                return this.tagName;
            }).get().join(", ");


            $("b").append(document.createTextNode(list));

          });
    </script>

  </head>
  <body>
      <span>span</span>
      <p>p</p>
      <div>div</div>
      <b>bold</b>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.map()

Map parents

We can use map function to map each parents.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--  w w w  .  j a v  a  2s .c  o  m-->
             var parentEls = $("span").parents()
                          .map(function () {
                                return this.tagName;
                              })
                          .get().join(", ");
             $("span").append(parentEls);
        });
    </script>
  </head>
  <body>
    <body>
       <div>
         <p>
          <span>
          </span>
         </p>
       </div>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.map()

Use map function to get value from input element

We can also use map function to get value from input element.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from ww w . ja v  a  2s.  c  o m-->
           $("p").append( $("input").map(function(){
             return $(this).val();
           }).get().join(", ") );
        });
    </script>

  </head>
  <body>
    <body>
      <p></p>
      <form>
        <input type="text" name="name" value="A"/>
        <input type="text" name="name" value="B"/>

      </form>

  </body>
</html>

Click to view the demo

The code above generates the following result.

.map()

Map value with index and value

map function can not only work on HTML elements it can also deal with the array element. The following code maps value with index and value


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- ww w.  jav  a 2s .  co m-->
              var arr = [ "a", "b", "c", "d", "e" ]
              arr = jQuery.map(arr, function(n, i){
                  return (n.toUpperCase() + i);
              });
              alert(arr);
        });
    </script>
  </head>
  <body>
    <body>
        <p></p><p></p><p></p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.map()