Usage: 1. Used to pass elements into the collection through functions and generate new jQuery objects. The syntax is ".map(callback(index,domElement))"; 2. Used to process elements in the array and encapsulate the results as A new array is returned, the syntax is "$.map(array or object, specified function)".
How to quickly get started with VUE3.0: Enter
the operating environment of this tutorial: Windows 10 system, jquery3.2.1 version, Dell G3 computer.
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))
callback(index,domElement) A function object called for each element in the current collection.
Since the return value is a jQuery-encapsulated array, use get() to process the returned object to get the underlying array.
An 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> Output results:
2. The $.map() function is used to process each element in the array (or each attribute of the object) using the specified function, and encapsulates the processing result as a new array and returns 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 )
object Array/Object type specifies the array or object that needs to be processed.
The processing function specified by the callback Function type.
An example is 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> Output results:
Recommended related video tutorials: jQuery video tutorial
The above is the detailed content of how map is used in jquery. For more information, please pay attention to other related articles on the PHP Chinese website!
