Skip to content
Related Articles

Related Articles

JQuery | map() Method
  • Last Updated : 30 Apr, 2020

This map() Method in jQuery is used to translate all items in an array or object to new array of items.

Syntax:

jQuery.map( array/object, callback )

Parameters: This method accept two parameters which is mentioned above and described below:

  • array/object: This parameter holds the Array or object to translate.
  • callback: This parameter holds the function to process each item against.

Return Value: It returns the array.

Below examples illustrate the use of map() method in jQuery:



Example 1: This example use jQuery.map() method and return the square of array element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>JQuery | map() method</title>
    <script src=
    </script>
  
</head>
  
<body style="text-align:center;">
  
    <h1 style="color: green"
        GeeksforGeeks 
    </h1>
  
    <h3>JQuery | map() method</h3>
    <b>Array = [2, 5, 6, 3, 8, 9]</b>
    <br>
    <br>
    <button onclick="geek()">Click</button>
    <br>
    <br>
    <b id="root"></b>
  
    <script>
        function geek() {
            var el = document.getElementById('root');
            var arr = [2, 5, 6, 3, 8, 9];
  
            var newArr = jQuery.map(arr, function(val, index) {
                return {
                    number: val,
                    square: val * val
                };
            })
            el.innerHTML = JSON.stringify(newArr);
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Example 2: This example use map() method to concatenate character ‘A’ with every character of name.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>JQuery | map() method</title>
    <script src=
    </script>
  
</head>
  
<body style="text-align:center;">
  
    <h1 style="color: green"
        GeeksforGeeks 
    </h1>
  
    <h3>JQuery | map() method</h3>
    <b>String = "Shubham"</b>
    <br>
    <br>
    <button onclick="geek()">Click</button>
    <br>
    <br>
    <b id="root"></b>
  
    <script>
        function geek() {
            var el = document.getElementById('root');
            var name = "Shubham";
            name = name.split("");
  
            // New array of character and names  
            // concatenated with 'A'  
            var newName = jQuery.map(name, function(item) {
                return item + 'A<br>';
            })
            el.innerHTML = newName;
        }
    </script>
</body>
  
</html>                     

chevron_right


Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :