当前位置:首页 > 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 是一个快速、轻量级的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和…

jquery页面

jquery页面

jQuery 页面操作指南 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互的操作。以下是 jQuery 在页面中的常见使用方法…

jquery 添加

jquery 添加

jQuery 添加元素的方法 动态添加 HTML 内容 使用 append()、prepend()、after() 或 before() 方法可以在 DOM 中插入新元素。 // 在元素内部末尾…

jquery判断

jquery判断

jQuery 判断元素存在与属性方法 使用 jQuery 判断元素是否存在可通过检查选择器返回的 jQuery 对象长度: if ($('#elementId').length > 0) {…

jquery属性

jquery属性

jQuery 属性操作 jQuery 提供了多种方法来操作 HTML 元素的属性。这些方法可以用于获取、设置、修改或删除元素的属性。 获取属性值 使用 attr() 方法可以获取指定属性的值。例如,…

jquery的方法

jquery的方法

jQuery 常用方法分类 jQuery 是一个快速、简洁的 JavaScript 库,提供了大量简化 DOM 操作、事件处理、动画效果和 AJAX 交互的方法。以下是 jQuery 核心方法的分类和…