两种形式:
一、格式一
$.map(arr|obj,callback):将一个数组中的元素转换到另一个数组中,callback:function(ele,i):ele为当前处理的元素,i为当前处理的元素的下标,返回的是JavaScript原生数组
二、格式二
jquery对象.map(callback):将一组元素转换成其他数组,返回的是jquery数组对象。callback:function(i,ele):注意和格式一的位置不同。
格式一跟我们熟悉的用于遍历对象或者数组或者元素集合的$.each(object,[callback])比较类似,也比较简单。来看个例子:
有如下html结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="resources/js/jquery-1.12.4.min.js"></script>
<title>index</title>
</head>
<body>
<form method="post" action="">
<div>
<label for="two">2</label>
<input type="checkbox" value="two" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="four" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="six" id="six" name="number[]">
</div>
</form>
</body>
</html>
JavaScript代码功能:把所有复选框的值放到一个数组里面。
<script>
var arr=$.map($(':checkbox'),function(ele,i){
console.log(ele);
console.log(i);
return $(ele).val();
});
console.log(arr);//可以直接使用arr[0]
</script>
结果:
上面的JavaScript代码也可以使用jquery对象.map(callback)的方式来改写:
var arr=$(':checkbox').map(function(i,ele) {
console.log(i);
console.log(ele);
return this.id;
});
console.log(arr instanceof jQuery);//true
console.log(arr);
执行结果:
注意:jquery对象.map(callback)返回的是jquery数组对象,而不是JavaScript原生的数组。