Array of Values From an Existing Array Using Map Function in jQuery

To further elaborate on the jQuery function day by day, I had a look into a very interesting function which helps to make an array from existing arrays named Map().

Here in the code we have an ordered list with some list elements. We'd try to select all list elements from there and pass as an argument into the jQuery Map function.

The basic structure of Map() is: $.map ( array, callback(elementOfArray, indexInArray) )

Map-Function-in-jQuery1.jpg

Callback functions are ideal for use in situations in which a task is performed repeatedly. In this sample application I've used a list of elements under an ordered list under here:

Map-Function-in-jQuery2.jpg

And tried to use the Map () utility function .as started earlier in this document the Map function makes an array from an existing array. The same functionality is being done here.

Map-Function-in-jQuery3.jpg

The preceding figure shows that the map () function accepts selector elements (e.g "li.class"), along with the second argument, the callback function (). The callback function () iterates all items one by one with the index value. Later down the line the returned array is being append with the CSS class show.

The output of an application such as:

Map-Function-in-jQuery4.jpg

Sample application has been attached as a reference.

Up Next
    Ebook Download
    View all
    Learn
    View all