.map()


.map( callback(index, domElement) )返回: jQuery

描述: 通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象。

  • 添加的版本: 1.2.map( callback(index, domElement) )

    • callback(index, domElement)
      类型: Function()
      一个函数对象,会在处理集合中的每个元素时被调用。

如果你想处理一个简单的数组或对象中,使用jQuery.map()代替。

由于返回值是一个jQuery包裹的数组,所以通常会使用get()方法将其转换成普通的数组。

.map()方法特别适用于获取或设置元素集合中的值。例如,如下的表单中包含一组 checkbox 框:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="checkbox" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>

我们可以得到一个用逗号分隔的复选框 ID:

1
2
3
$(':checkbox').map(function() {
return this.id;
}).get().join();

此调用的结果是字符串, "two,four,six,eight".

在回调函数中,this指向每次迭代中的当前DOM元素。该函数可以返回一个单独的数据或数据数组,并在结果集合中插入。如果数组返回,数组中的元素插入到集合。如果函数返回nullundefined ,没有元素将被插入。

例子:

Example: 获取表单中所有表单元素的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
</style>
<script src="https://code.jquery.com/jquery-latest.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://ejohn.org/"/>
</form>
<script>
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
</script>
</body>
</html>

Demo:

Example: A contrived example to show some functionality.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:16px; }
ul { float:left; margin:0 30px; color:blue; }
#results { color:red; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
<ul id="results">
</ul>
<script>
var mappedItems = $("li").map(function (index) {
var replacement = $("<li>").text($(this).text()).get(0);
if (index == 0) {
/* make the first item all caps */
$(replacement).text($(replacement).text().toUpperCase());
} else if (index == 1 || index == 3) {
/* delete the second and fourth items */
replacement = null;
} else if (index == 2) {
/* make two of the third item and add some text */
replacement = [replacement,$("<li>").get(0)];
$(replacement[0]).append("<b> - A</b>");
$(replacement[1]).append("Extra <b> - B</b>");
}
/* replacement will be a dom element, null,
or an array of dom elements */
return replacement;
});
$("#results").append(mappedItems);
</script>
</body>
</html>

Demo:

Example: Equalize the heights of the divs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 40px; float:left; }
input { clear:left}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="button" value="equalize div heights">
<div style="background:red; height: 40px; "></div>
<div style="background:green; height: 70px;"></div>
<div style="background:blue; height: 50px; "></div>
<script>
$.fn.equalizeHeights = function() {
var maxHeight = this.map(function(i,e) {
return $(e).height();
}).get();
return this.height( Math.max.apply(this, maxHeight) );
};
$('input').click(function(){
$('div').equalizeHeights();
});
</script>
</body>
</html>

Demo: