jquery循环成数组集合

在编程的世界里，jQuery 无疑是一个强大的工具，它让复杂的 DOM 操作变得简单起来，我们要聊的是 jQuery 如何帮助我们把一系列的元素循环转换成数组集合，这个技巧在日常的开发工作中非常实用，尤其是当你需要对一组元素进行批量处理时。

想象一下，你需要从网页上提取多个列表项的文本，或者对一系列按钮进行样式调整，这时候，如果能够将这些元素转换成一个数组，那么后续的操作就会变得非常简单，jQuery 提供了一个非常简洁的方法来实现这一点，那就是$.map() 函数。

$.map() 函数可以遍历一个数组或者类数组对象（NodeList），并且对每个元素执行一个回调函数，这个回调函数可以返回一个新的值，然后$.map() 会将这些返回值收集起来，形成一个新数组，这样，我们就可以将 DOM 元素集合转换成一个数组，方便我们进行进一步的操作。

举个简单的例子，假设我们有一个包含多个按钮的列表，我们想要将这些按钮的文本内容提取出来：

<ul id="buttonList">
  <li><button>按钮1</button></li>
  <li><button>按钮2</button></li>
  <li><button>按钮3</button></li>
</ul>

我们可以使用以下 jQuery 代码来实现：

var buttonTexts = $('ul#buttonList button').map(function() {
  return $(this).text();
}).get();

这段代码首先选择了所有的按钮，然后使用.map() 方法遍历这些按钮，对于每个按钮，我们调用.text() 方法来获取它的文本内容。.map() 方法收集这些文本内容，最终返回一个数组buttonTexts，包含了所有按钮的文本。

这个数组可以用于各种操作，比如你可以遍历它来执行一些操作，或者将其存储起来以备后用，这就是将 DOM 元素集合转换成数组的强大之处。

再举一个例子，如果你想要对一组图片进行操作，比如添加水印或者调整大小，你可以这样做：

<div id="imageGallery">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">
  <img src="image3.jpg" alt="图片3">
</div>

var images = $('#imageGallery img').map(function() {
  return $(this).attr('src');
}).get();
// images 数组包含了所有图片的 src 属性值

通过这种方式，我们可以轻松地获取到所有图片的路径，然后对它们进行批量处理，无论是添加水印、调整尺寸还是进行其他任何操作，都变得异常简单。

jQuery 的.map() 方法是一个非常强大的工具，它可以帮助我们将 DOM 元素集合转换成数组，从而简化我们的开发工作，无论是处理文本、图片还是其他任何类型的元素，这个方法都能大显身手，下次当你需要对一组元素进行批量操作时，不妨试试这个方法，它可能会给你带来意想不到的便利。