jQuery.map()
jQuery.map( array, callback(elementOfArray, indexInArray) ) 返回: Array
描述: Translate all items in an array or object to new array of items.
-
version added: 1.0jQuery.map( array, callback(elementOfArray, indexInArray) )
array待轉(zhuǎn)換數(shù)組。
callback(elementOfArray, indexInArray)為每個數(shù)組元素調(diào)用,而且會給這個轉(zhuǎn)換函數(shù)傳遞一個表示被轉(zhuǎn)換的元素作為參數(shù)。函數(shù)可返回任何值。
this將是全局的window對象。 -
version added: 1.6jQuery.map( arrayOrObject, callback( value, indexOrKey ) )
arrayOrObject待轉(zhuǎn)換數(shù)組或?qū)ο蟆?/p>
callback( value, indexOrKey )該函數(shù)用淚處理每個項,第一個參數(shù)給函數(shù)是價值;第二個參數(shù)是的索引或key屬性。該函數(shù)可以返回任何值添加到數(shù)組。返回全新的結(jié)果數(shù)組。在函數(shù),
this指的是全球(窗口)的對象。
$.map()方法適用于將數(shù)組或?qū)ο竺總€項目新陣列映射到一個新數(shù)組的函數(shù)。在jQuery 1.6之前,,$.map()只支持遍歷數(shù)組和類似數(shù)組的對象 。在jQuery 1.6也支持遍歷對象。
類似數(shù)組的對象,如jQuery的collections,被當(dāng)作數(shù)組。換句話說,如果一個對象有一個.length屬性和一個值在.length - 1上,它是作為一個遍歷數(shù)組。
這個轉(zhuǎn)換功能,是提供給調(diào)用此方法中的每個數(shù)組或?qū)ο蟮捻攲釉夭鬟f兩個參數(shù)該元素的值和其索引或在數(shù)組或?qū)ο蟮膋ey。
該函數(shù)可以返回:
- 這將是映射到結(jié)果數(shù)組的轉(zhuǎn)化值
-
null, 以刪除該項目 - 一個數(shù)組的值
Examples:
Example: A couple examples of using .map()
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; }
p { color:green; margin:0; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
<div></div>
<p></p>
<span></span>
<script>
var arr = [ "a", "b", "c", "d", "e" ];
$("div").text(arr.join(", "));
arr = jQuery.map(arr, function(n, i){
return (n.toUpperCase() + i);
});
$("p").text(arr.join(", "));
arr = jQuery.map(arr, function (a) {
return a + a;
});
$("span").text(arr.join(", "));
</script>
</body>
</html>
Demo:
Example: Map the original array to a new one and add 4 to each value.
$.map( [0,1,2], function(n){
return n + 4;
});
Result:
[4, 5, 6]
Example: Maps the original array to a new one and adds 1 to each value if it is bigger then zero, otherwise it's removed.
$.map( [0,1,2], function(n){
return n > 0 ? n + 1 : null;
});
Result:
[2, 3]
Example: Map the original array to a new one; each element is added with its original value and the value plus one.
$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});
Result:
[0, 1, 1, 2, 2, 3]
Example: Map the original object to a new array and double each value.
var dimensions = { width: 10, height: 15, length: 20 };
dimensions = $.map( dimensions, function( value, index ) {
return value * 2;
});
Result:
[20, 30, 40]
Example: Map an object's keys to an array.
var dimensions = { width: 10, height: 15, length: 20 },
keys = $.map( dimensions, function( value, index ) {
return index;
});
Result:
["width", "height", "length"]
Example: Maps the original array to a new one; each element is squared.
$.map( [0,1,2,3], function (a) {
return a * a;
});
Result:
[0, 1, 4, 9]
Example: Remove items by returning null from the function. This removes any numbers less than 50, and the rest are decreased by 45.
$.map( [0, 1, 52, 97], function (a) {
return (a > 50 ? a - 45 : null);
});
Result:
[7, 52]
Example: Augmenting the resulting array by returning an array inside the function.
var array = [0, 1, 52, 97];
array = $.map(array, function(a, index) {
return [a - 45, index];
});
Result:
[-45, 0, -44, 1, 7, 2, 52, 3]