.map()

In this chapter you will learn:

Syntax and Description for .map()
How to map each list item
Join the tag name with map function
How to map parent element
Use map function to get value from input element
Map value with index and value

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><!--  ja  v a 2  s.com-->
  <head>
    <script src="http://java2s.com/style/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>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

Join the tag name with map function

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

<html><!--from j av a  2s. c  om-->
  <head>
    <script src="http://java2s.com/style/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 parents

We can use map function to map each parents.

<html><!--from   jav  a  2 s. c om-->
  <head>
    <script src="http://java2s.com/style/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 function to get value from input element

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

<html><!--from j a  v a 2s.com-->
  <head>
    <script src="http://java2s.com/style/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

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><!--  j a v  a2  s.  c o m-->
  <head>
    <script src="http://java2s.com/style/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

Next chapter...

What you will learn in the next chapter: