jquery map
jQuery .map() 方法
jQuery 的 .map() 方法用于遍历一个 jQuery 对象中的元素或数组,并对每个元素执行一个函数,最终返回一个新的 jQuery 对象或数组。它与原生 JavaScript 的 Array.prototype.map 类似,但专为 jQuery 对象设计。
语法
$.map(array, callback)
$(selector).map(callback)
array: 需要遍历的数组或类数组对象。callback: 对每个元素执行的函数,可以返回处理后的值或null(用于过滤)。selector: jQuery 选择器,用于选择需要遍历的元素。
示例代码
1. 使用 $.map() 处理数组
const numbers = [1, 2, 3, 4];
const squaredNumbers = $.map(numbers, function(num) {
return num * num;
});
console.log(squaredNumbers); // 输出: [1, 4, 9, 16]
2. 使用 $(selector).map() 处理 DOM 元素
const texts = $('div').map(function() {
return $(this).text();
}).get();
console.log(texts); // 输出所有 div 元素的文本内容数组
3. 过滤数组中的元素
const numbers = [1, 2, 3, 4];
const evenNumbers = $.map(numbers, function(num) {
return num % 2 === 0 ? num : null;
});
console.log(evenNumbers); // 输出: [2, 4]
注意事项
.map()返回的是一个 jQuery 对象,如果需要普通的数组,可以调用.get()方法。$.map()可以直接操作数组或类数组对象,而$(selector).map()用于操作 DOM 元素集合。- 回调函数可以接收两个参数:
index和element(或value),分别表示当前元素的索引和值。
与原生 Array.prototype.map 的区别
- jQuery 的
.map()会自动跳过null或undefined的返回值,而原生map会保留这些值。 - jQuery 的
.map()可以直接操作类数组对象(如arguments或 DOM 集合),而原生map需要先转换为数组。







