.map()
.map( callback(index, domElement) ) 返回： jQuery
描述： 通過(guò)一個(gè)函數(shù)匹配當(dāng)前集合中的每個(gè)元素,產(chǎn)生一個(gè)包含的返回值的jQuery新對(duì)象。
-
version added: 1.2.map( callback(index, domElement) )
callback(index, domElement)一個(gè)函數(shù)對(duì)象，將調(diào)用當(dāng)前集合中的每個(gè)元素。
作為返回值是一個(gè)jQuery包裝的數(shù)組，這是非常常見(jiàn)get()返回的對(duì)象與基本數(shù)組。
.map()方法尤其有用于元素獲取或設(shè)置一個(gè)集合的值?？紤]一個(gè)復(fù)選框集合的表單：
<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>
我們可以得到一個(gè)用逗號(hào)分隔的復(fù)選框 ID：
$(':checkbox').map(function() {
return this.id;
}).get().join(',');
此調(diào)用的結(jié)果是字符串， "two,four,six,eight".
在回調(diào)函數(shù)中，this指的是每次迭代當(dāng)前DOM元素。該函數(shù)可以返回一個(gè)單獨(dú)的數(shù)據(jù)項(xiàng)目或數(shù)據(jù)項(xiàng)的數(shù)組并在結(jié)果集合中插入。如果數(shù)組返回，數(shù)組中的元素插入到集合。如果函數(shù)返回null或undefined ，沒(méi)有元素將被插入。
Examples:
Example: Build a list of all the values within a form.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.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.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:16px; }
ul { float:left; margin:0 30px; color:blue; }
#results { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.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 an 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.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 40px; float:left; }
input { clear:left}
</style>
<script src="http://code.jquery.com/jquery-latest.min.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(){
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )
}
$('input').click(function(){
$('div').equalizeHeights();
});
</script>
</body>
</html>