In jQuery, .map() is used to transform a collection of elements and return a new jQuery object (or array) based on the function you provide. It’s similar to the array .map() method but works on jQuery collections.
1. Syntax
$(selector).map(function(index, element) {
// Return a transformed value
});
-
index → the position of the element in the jQuery collection
-
element → the actual DOM element (not a jQuery object)
-
Return value → Can be a single value or array of values. Use $(...) to wrap elements if you want a jQuery object.
2. Example: Transform elements into an array of text
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
var fruits = $('li').map(function(index, elem) {
return $(elem).text(); // Get the text of each li
}).get(); // .get() converts jQuery object into a plain array
console.log(fruits);
// Output: ["Apple", "Banana", "Cherry"]
-
Without .get(), .map() returns a jQuery object, not a plain array.
-
.get() converts it into a standard JavaScript array.
3. Example: Transform elements into new elements
var newItems = $('li').map(function(index, elem) {
return $('<p>').text('Fruit: ' + $(elem).text());
});
$('body').append(newItems);
// Adds <p>Fruit: Apple</p>, <p>Fruit: Banana</p>, etc.
-
Here, each <li> is transformed into a new <p> element.
-
.map() allows collection transformation without manually looping.
4. Key Notes
