.map()

Syntax

.map(callback)

Parameters

callback: A function object that will be invoked for each element in the current set

Return value

The new jQuery object.

Description

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

Examples

Add LI to UL

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           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>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
      </ul>
      <ul id="results">
      </ul>
  </body>
</html>

Click to view the demo

Add node to tag

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
          $(document).ready(function(){

            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

Map each parents

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             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

Use .map() to join strings

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        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

Map value function

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("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

Map value with index and value

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              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

Traversing-Map

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("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