A repository of over 1000 quality jQuery plugins

jQuery jQuery.map()

Learn all about the jQuery function jQuery.map().

If you wish to process a jQuery object — for example, $('div').map( callback ); — use .map() instead.

The $.map() method applies a function to each item in an array or object and maps the results into a new array. Prior to jQuery 1.6, $.map() supports traversing arrays only. As of jQuery 1.6 it also traverses objects.

Array-like objects — those with a .length property and a value on the .length - 1 index — must be converted to actual arrays before being passed to $.map(). The jQuery library provides $.makeArray() for such conversions.

1
2
3
4
5
6
7
8
9
10
// The following object masquerades as an array.
var fakeArray = { "length": 2, 0: "Addy", 1: "Subtracty" };
// Therefore, convert it to a real array
var realArray = $.makeArray( fakeArray )
// Now it can be used reliably with $.map()
$.map( realArray, function( val, i ) {
// Do something
});

The translation function that is provided to this method is called for each top-level element in the array or object and is passed two arguments: The element’s value and its index or key within the array or object.

The function can return:

  • the translated value, which will be mapped to the resulting array
  • null or undefined, to remove the item
  • an array of values, which will be flattened into the full array