What is the usage of map in jquery-JS Tutorial-php.cn

What is the usage of map in jquery

WBOY

Release： 2022-04-02 16:06:54

Original

3575 people have browsed it

Usage: 1. Used to pass elements into the collection through functions to generate new jQuery objects. The syntax is ".map(callback(index,domElement))"; 2. Used to process elements in the array. element and encapsulate the result as a new array to return, the syntax is "$.map (array or object, specified function)".

What is the usage of map in jquery

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

Usage of map in jquery

1. map() passes each element to the current matching collection through the function and generates a new jQuery object containing the return value.

Syntax

.map(callback(index,domElement))

Copy after login

callback(index,domElement) A function object called for each element in the current collection.

Since the return value is an array encapsulated by jQuery, use get() to process the returned object to get the underlying array.

The example is as follows:

<!DOCTYPE html>
<html>
<head>
  <style>p { color:red; }</style>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
  <p><b>Values: </b></p>
  <form>
    <input type="text" name="name" value="John"/>
    <input type="text" name="password" value="password"/>
    <input type="text" name="url" value="http://php.cn/"/>
  </form>
<script>
    $("p").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );
</script>
</body>
</html>

Copy after login

Output result:

What is the usage of map in jquery

2, $.map() function is used to use the specified function Process each element in the array (or each attribute of the object), and encapsulate the processing results as a new array and return it.

Before jQuery 1.6, this function only supported traversing arrays; starting from 1.6, this function also supports traversing objects.

map() will also pass in two parameters to the function: one is the element or attribute value of the current iteration, and the other is the array index or object attribute name of the current iteration item.

The return value of this function will be used as an element in the result array. If the return value is null or undefined, it will not be added to the result array.

$.map( object, callback )

Copy after login

object Array/Object type specifies the array or object that needs to be processed.

callback Function type specifies the processing function.

Examples are as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div { color:blue; }
p { color:green; margin:0; }
span { color:red; }
</style>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div></div>
<p></p>
<span></span>
<script>
$(function () { 
var arr = [ "a", "b", "c", "d", "e" ];
$("div").text(arr.join(", "));
arr = $.map(arr, function(n, i){
return (n.toUpperCase() + i);
});
$("p").text(arr.join(", "));
arr = $.map(arr, function (a) {
return a + a;
});
$("span").text(arr.join(", "));
})
</script>
 
</body>
</html>

Copy after login

Output results:

What is the usage of map in jquery

## Recommended related video tutorials:

jQuery video tutorial

The above is the detailed content of What is the usage of map in jquery. For more information, please follow other related articles on the PHP Chinese website!