The jQuery map() method can be used to create a new object containing the return values from each selected element set. You have to pass each element in the current matched set through a function to the method.
Syntax
The syntax of this method is given below:-
Description of the Parameters
The description of these parameters is given below.
| Parameter Name | Description |
|---|---|
| selector | Specify the element to select and create a new object. You can use the element tag name, class name, or id to select. It is a required field. |
| callback | It is the function that invoked for each element in the current set . |
jQuery map() Method to Pass Element and Create New Object
If you want to create a new object from all the selected elements, you have to use the method as given in the example below. The example contains the list of elements and the button element. You have to create a new object containing the classes of these list items.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $(".mypara").append(jQuery("ul li").map(function(){ return $(this).attr("class"); }).get().join(', ')); }); }); </script> <ul> <li class="first">First list element</li> <li class="second">Second list element</li> <li class="third">Third list element</li> <li class="last">Last list element</li> </ul> <p class="mypara"></p> <button type="button" class="mybtn">Click to Map</button> |
Output
- First list element
- Second list element
- Third list element
- Last list element
When you click the button given above, it collects the classes of all the list elements. This is an array containing the comma-separated classes which can be useful in programming.
You may also like to read
I hope you like this tutorial on jQuery map() method. If you have any queries regarding the tutorial, please comment below.
References