This map() Method in jQuery is used to translate all items in an array or object to a new array of items.
Syntax:
jQuery.map( array/object, callback )
Parameters: This method accepts two parameters which are 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.
The below examples illustrate the use of map() method in jQuery:
Example 1: This example uses jQuery.map() method and return the square of the array element.
html
<!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() {
let el = document.getElementById('root');
let arr = [2, 5, 6, 3, 8, 9];
let newArr = jQuery.map(arr, function (val, index) {
return {
number: val,
square: val * val
};
})
el.innerHTML = JSON.stringify(newArr);
}
</script>
</body>
</html>
|
Output:
Example 2: This example use map() method to concatenate character ‘A’ with every character of the name.
html
<!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() {
let el = document.getElementById('root');
let name = "Shubham";
name = name.split("");
// New array of character and names
// concatenated with 'A'
let newName = jQuery.map(name, function (item) {
return item + 'A<br>';
})
el.innerHTML = newName;
}
</script>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
11 Jul, 2023
Like Article
Save Article