当前位置:首页 > jquery

jquery map

2026-01-16 14:45:58jquery

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. 过滤数组中的元素

jquery map

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 元素集合。
  • 回调函数可以接收两个参数:indexelement(或 value),分别表示当前元素的索引和值。

与原生 Array.prototype.map 的区别

  • jQuery 的 .map() 会自动跳过 nullundefined 的返回值,而原生 map 会保留这些值。
  • jQuery 的 .map() 可以直接操作类数组对象(如 arguments 或 DOM 集合),而原生 map 需要先转换为数组。

标签: jquerymap
分享给朋友:

相关文章

jquery之家

jquery之家

jQuery之家相关资源 jQuery之家是一个提供jQuery插件、教程和资源的网站,适合开发者学习和使用jQuery技术。以下是关于jQuery之家的主要内容和资源: 网站内容 提供丰富的jQ…

jquery 方法

jquery 方法

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常用的 jQuery 方法及其用途: 选择器方法 $("selec…

jquery 字符串

jquery 字符串

jQuery 字符串操作 jQuery 提供了多种方法来处理字符串,尽管原生 JavaScript 已经具备强大的字符串处理能力,但结合 jQuery 可以更方便地操作 DOM 元素中的字符串内容。…

jquery 循环

jquery 循环

jQuery 循环方法 jQuery 提供了多种循环遍历元素或数组的方法,以下是常用的几种方式: each() 方法 each() 是 jQuery 中最常用的循环方法,用于遍历 jQuery 对象…

jquery赋值

jquery赋值

jQuery 赋值操作 jQuery 提供了多种方法对 HTML 元素的属性、内容、样式等进行赋值操作。以下是常见的几种赋值方式: 文本内容赋值 使用 text() 方法可以设置元素的文本内容,该…

jquery列表

jquery列表

jQuery 列表操作 jQuery 提供了多种方法来操作 HTML 列表(如 <ul> 或 <ol>),包括动态添加、删除、修改列表项,以及事件绑定等。 创建列表 使用 j…