jQuery中map()方法用法实例

当你需要将一个数组中的每个元素通过某种方式转换后生成一个新的数组时，jQuery中提供了map()方法来帮助我们实现。

一、map()方法的基本用法

map()方法的作用是将数组中的每个元素依次执行函数，并用函数的返回值组成新的数组。下面我们通过一个简单的示例来学习map()方法的基本用法。

假设我们有一个数组numbers，包含1到5这5个数字，现在我们想将每个元素平方后生成一个新的数组，我们可以使用map()方法来实现。

var numbers = [1, 2, 3, 4, 5];
var squares = $.map(numbers, function(n) {
  return n * n;
});
console.log(squares); //[1, 4, 9, 16, 25]

在上面的代码中，我们传入了一个数组numbers和一个匿名函数，在匿名函数中将每个元素平方后返回，最后用返回的结果生成了新的数组squares。

二、使用map()方法遍历HTML元素

map()方法也可以用来遍历HTML元素并生成新的数组，我们可以通过选择器获取一组HTML元素，再对它们进行操作。

下面我们通过两个示例来掌握它的用法。

1.遍历HTML元素并生成新的数组

假设我们有一个ul列表，其中包含多个li列表项，每个li元素中都有一个属性data-price，我们要将每个li元素的data-price属性值组成一个新的数组，可以使用map()方法来实现。

<ul>
  <li data-price="10">苹果</li>
  <li data-price="20">香蕉</li>
  <li data-price="30">橘子</li>
  <li data-price="40">草莓</li>
  <li data-price="50">芒果</li>
</ul>

var prices = $('li').map(function() {
  return $(this).attr('data-price');
}).get();
console.log(prices); //["10", "20", "30", "40", "50"]

在上面的代码中，我们首先使用jQuery选择器获取到所有的li元素，然后使用map()方法将每个li元素的data-price属性值返回，最后调用get()方法得到最终的数组。

2.遍历HTML元素并生成新的jQuery对象

假设我们有一个包含多个div元素的页面，其中有些div元素是红色的，我们要将这些元素生成一个新的jQuery对象。我们可以使用map()方法来实现。

<div class="red">红色的div1</div>
<div>普通的div1</div>
<div class="red">红色的div2</div>
<div>普通的div2</div>
<div>普通的div3</div>

var $redDivs = $('div').map(function() {
  if ($(this).hasClass('red')) {
    return this;
  }
}).get();
console.log($redDivs); //[$('.red')[0], $('.red')[1]]

在上面的代码中，我们首先使用jQuery选择器获取到所有的div元素，然后使用map()方法来遍历每个div元素，如果当前div元素有class为red，则返回该元素，最后调用get()方法得到最终的jQuery对象。

最后，需要注意的是，map()方法是不会修改原来的数组或jQuery对象的，它将会返回一个新的数组或jQuery对象。