如果您希望處理一個 jQuery 對象——例如，$('div').map( callback );——請改用.map()。
$.map()方法將函數應用於數組或對象中的每個項目，並將結果映射到新數組中。在 jQuery 1.6 之前,$.map()支持遍曆arrays only.從 jQuery 1.6 開始它還遍曆對象。
Array-like 對象 — 具有 .length 屬性 and 在 .length - 1 索引上的值的對象 — 在傳遞給 $.map() 之前必須轉換為實際數組。 jQuery 庫為此類轉換提供了$.makeArray()。
// The following object masquerades as an array.
var fakeArray = { "length": 2, 0: "Addy", 1: "Subtracty" };
// Therefore, convert it to a real array
var realArray = $.makeArray( fakeArray )
// Now it can be used reliably with $.map()
$.map( realArray, function( val, i ) {
// Do something
});
|
為數組或對象中的每個頂級元素調用提供給此方法的轉換函數，並傳遞兩個參數：元素的值及其在數組或對象中的索引或鍵。
該函數可以返回：
- 翻譯後的值，將映射到結果數組
null 或 undefined ，刪除項目- 一組值，將被展平為完整的數組
使用 $.map() 更改數組的值。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.map demo</title>
<style>
div {
color: blue;
}
p {
color: green;
margin: 0;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.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>
|
演示：
將原始數組映射到一個新數組，並將每個值加 4。
$.map( [ 0, 1, 2 ], function( n ) {
return n + 4;
});
|
結果：
將原始數組映射到一個新數組，如果每個值大於零，則將其加 1，否則將其刪除。
$.map( [ 0, 1, 2 ], function( n ) {
return n > 0 ? n + 1 : null;
});
|
結果：
將原始數組映射到新數組；每個元素都加上它的原始值和加一的值。
$.map( [ 0, 1, 2 ], function( n ) {
return [ n, n + 1 ];
});
|
結果：
將原始對象映射到新數組並將每個值加倍。
var dimensions = { width: 10, height: 15, length: 20 };
dimensions = $.map( dimensions, function( value, index ) {
return value * 2;
});
|
結果：
將對象的鍵映射到數組。
var dimensions = { width: 10, height: 15, length: 20 };
var keys = $.map( dimensions, function( value, key ) {
return key;
});
|
結果：
[ "width", "height", "length" ]
|
將原始數組映射到新數組；每個元素都是平方的。
$.map( [ 0, 1, 2, 3 ], function( a ) {
return a * a;
});
|
結果：
將原始數組映射到新數組，通過返回 null 並從其餘部分中減去 45 來刪除小於 50 的數字。
$.map( [ 0, 1, 52, 97 ], function( a ) {
return (a > 50 ? a - 45 : null);
});
|
結果：
通過在函數內返回一個數組來擴充結果數組。
var array = [ 0, 1, 52, 97 ];
array = $.map( array, function( a, index ) {
return [ a - 45, index ];
});
|
結果：
[ -45, 0, -44, 1, 7, 2, 52, 3]
|
