当前位置:首页 > 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. 过滤数组中的元素

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 需要先转换为数组。

jquery map

标签: jquerymap
分享给朋友:

相关文章

jquery下载

jquery下载

jQuery下载方法 官方下载渠道 访问jQuery官网(https://jquery.com/),点击页面中的“Download”按钮。提供两个版本选择: Production版本:压缩后的…

jquery api

jquery api

以下是关于 jQuery API 的详细介绍和使用方法: jQuery API 概述 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Aj…

jquery之家

jquery之家

jQuery之家资源推荐 jQuery之家(通常指提供jQuery相关资源的网站或社区)是开发者获取插件、教程和代码示例的重要平台。以下是几个与jQuery相关的优质资源网站: 1. jQuery…

jquery 筛选器

jquery 筛选器

jQuery 筛选器 jQuery 筛选器用于从一组匹配的元素中进一步筛选出符合条件的子集。这些筛选器可以基于元素的位置、内容、属性或状态进行筛选。 基本筛选器 :first 选择第一个匹配的元素。…

jquery中

jquery中

jQuery 基础概念 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。其核心特点是“写得更少,做得更多”(Write L…

jquery div

jquery div

jQuery 操作 div 元素 jQuery 提供了多种方法来操作 div 元素,包括选择、修改内容、样式调整、事件绑定等。以下是常见操作的示例: 选择 div 元素 通过 ID 选择 div:…