.map()?.map() (since jQuery 1.2) runs a callback on every matched element and builds a new jQuery object from the values you return. Ideal for collecting IDs, values, text, or numbers from a set.
// Collect checkbox IDs → plain array → joined string
$(":checkbox")
.map(function () {
return this.id;
})
.get()
.join();
// Skip an item: return null or undefined
// Expand: return an array of items| Need | Use |
|---|---|
| Transform matched elements | $("li").map(fn) |
| Side effects only (no new set) | $("li").each(fn) |
| Map a plain array / object | jQuery.map(arr, fn) |
| Unwrap to a JS array | .get() or .toArray() |
| Keep / drop by test | .filter() |
.map()Select elements, return a value per item, then unwrap if you need a plain array.
.map(function (index, element) { … }).this is the current DOM element.null/undefined to skip..get() when you need a native array (.join(), Math.max, …).| Signature | Since | Role |
|---|---|---|
.map(callback) | 1.2 | Build a new jQuery object from return values |
callback(index, element) | — | this = current DOM element |
| Return value | — | Inserted into the result set |
| Return array | — | Each item inserted (expand) |
Return null / undefined | — | Skip — nothing inserted |
result = empty jQuery object
for each matched element with index i:
value = callback.call(element, i, element)
if value is null or undefined:
skip
else if value is an array:
append each item in value to result
else:
append value to result
return result
// often: result.get() → plain arrayKeep these facts handy while transforming collections.
| Topic | Detail |
|---|---|
| Returns | New jQuery object (not the original set) |
vs .each() | .each() = side effects · .map() = collect values |
vs jQuery.map() | Static utility for arrays/objects |
| Common chain | .map(…).get().join() |
| Skip | Return null or undefined |
| Expand | Return an array of items |
this | Current DOM element |
Map the sample list — collect text, skip odd indexes, or uppercase.
Short, copy-ready snippets. Prefer .map() when you need collected values.
Official pattern: map ids, then .get().join().
var ids = $(":checkbox").map(function () {
return this.id;
}).get().join();
$("#out").text("IDs: " + ids);
// → "IDs: two,four,six,eight"$(":checkbox") finds every checkbox.this.id for each one..get() gives a plain array..join() builds a comma-separated string.Official Ex 1 idea: map .val() from every input, then join.
$("p").append(
$("input").map(function () {
return $(this).val();
}).get().join(", ")
);
// Values: 2, 4, 6, 8input fields in the form.$(this).val() returns each field value..map() builds a jQuery-wrapped list of strings..get().join(", ") appends readable text.null and Expand with an ArrayReturn null to drop an item; return an array to insert more than one.
var items = $("li").map(function (index) {
var text = $(this).text();
if (index === 1 || index === 3) {
return null; // skip Second, Fourth
}
if (index === 2) {
return [text, text + " Extra"]; // expand Third
}
return text;
}).get();
$("#out").text(items.join(" | "));
// First | Third | Third Extra | Fifthnull/undefined inserts nothing..get() for a plain array before joining.Official Ex 3 idea without layout CSS: map lengths, then Math.max.
var lengths = $("li").map(function (i, el) {
return $(el).text().length;
}).get();
var maxLen = Math.max.apply(null, lengths);
$("#out").text("Lengths: " + lengths.join(", ") + " | max=" + maxLen);
// Lengths: 5, 10, 3 | max=10.get() → native number array.Math.max.apply(null, lengths) finds the largest..map() vs .each()Map collects text; each applies a side effect (mark odd items).
var texts = $("#demo li").map(function () {
return $(this).text();
}).get().join(" | ");
$("#out").text("Mapped: " + texts);
$("#demo li").each(function (i) {
if (i % 2) {
$(this).prepend("[odd] ");
}
});.map(); need side effects → .each().These trip up beginners most often with .map().
.get().map() returns a jQuery object. Call .get() (or .toArray()) before native array methods like .join().
null / undefined skip silentlyUseful for filtering inside .map(), but easy to miss if you meant to return 0 or "" — those are kept.
DOM collections → $("…").map(). Plain arrays/objects → jQuery.map(). Mixing them causes confusing results.
.map() only for side effectsIf you never use the return value, prefer .each(). It documents intent and avoids building an unused result set.
.map() has been part of jQuery since 1.2. Works wherever your loaded jQuery build runs.
Universal across browsers that run your jQuery version. Prefer current jQuery 3.x+ for teaching and production.
Bottom line: Safe for everyday collection transforms. Chain .get() when you need a plain array.
| Approach | Cost | Best for |
|---|---|---|
.map() on a small set | Cheap | Forms, lists, typical UI |
.map() + .get() | Cheap | Feeding native array APIs |
| Huge DOM + heavy work per item | Watch | Narrow the selector first |
Cost scales with match count and callback work. Prefer a tight selector over mapping half the document.
.get() before .join() or other native array methods.null/undefined skips; an array inserts multiple items..map() · side effects → .each() · plain data → jQuery.map().One line: .map() turns each matched element into a collected value — then .get() when you need a plain array.
Get the immediately following sibling of each matched element.
18 people found this page helpful