.map()

jQuery

previous page next page

.map()

Categories: Traversing > Filtering

.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)
      Type: Function()
      A function object that will be invoked for each element in the current set.

If you wish to process a plain array or object, use the jQuery.map() instead.

As the return value is a jQuery object, which contains an array, it's very common to call .get() on the result to work with a basic array.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
                                

                                  

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

To get a comma-separated list of checkbox IDs:

1
2
3
 
                                

                                  

                                    $(':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. The function can return an individual data item or an array of data items to be inserted into the resulting set. If an array is returned, the elements inside the array are inserted into the set. If the function returns null or undefined, no element will be inserted.

Examples:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        p { color:red; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://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>

Example: A contrived example to show some functionality.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        body { font-size:16px; }
                                    

                                  

                                  

                                    

                                        ul { float:left; margin:0 30px; color:blue; }
                                    

                                  

                                  

                                    

                                        #results { color:red; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://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 a dom element, null,
                                    

                                  

                                  

                                    

                                           or an array of dom elements */
                                    

                                  

                                  

                                    

                                        return replacement;
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      $("#results").append(mappedItems);
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Equalize the heights of the divs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      div { width: 40px; float:left; }
                                    

                                  

                                  

                                    

                                      input { clear:left}
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://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() {
                                    

                                  

                                  

                                    

                                        var maxHeight = this.map(function(i,e) {
                                    

                                  

                                  

                                    

                                          return $(e).height();
                                    

                                  

                                  

                                    

                                        }).get();
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        return this.height( Math.max.apply(this, maxHeight) );
                                    

                                  

                                  

                                    

                                      };
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      $('input').click(function(){
                                    

                                  

                                  

                                    

                                        $('div').equalizeHeights();
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page