JQuery中使用.each()遍历元素学习笔记

什么是jQuery的.each()方法

在jQuery中，通过选择器可以选中多个元素，这些元素可以存储在一个jQuery对象中。jQuery中的.each()方法可以遍历这个jQuery对象中的所有元素。

.each()方法的语法格式如下：

$(selector).each(function(index, element){
  // 在这里执行遍历操作
});

其中selector是我们需要选中的元素的css选择器，index是元素在被选中集合中的序号，element则是表示当前遍历的元素。在.each()的回调函数中，可以通过$(this)来访问当前遍历的元素。每个元素都会被执行回调函数一次。

如何使用jQuery的.each()方法

示例一：遍历表格中的所有行并修改元素的样式

在这个示例中，我们将使用.each()方法来遍历一个表格中的所有行，并依次修改每一行的样式。假设我们有如下的HTML代码：

<table>
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
</table>

首先，我们需要将这些行存储在一个jQuery对象中，代码如下：

var rows = $('table tr');

然后，我们使用.each()方法来遍历这些行，并依次修改每一行的样式。在这个例子中，我们将每隔一行的背景色设为灰色：

rows.each(function(index, element){
  if(index%2 === 0){
    $(this).css('background-color', 'grey');
  }
});

.each()方法的回调函数接受两个参数：index表示当前元素在集合中的序号，element则表示当前遍历的元素。在每行的回调函数中，我们首先通过index%2来判断当前行的奇偶性，如果是偶数行，我们就使用$(this)来访问当前行，并将背景色设为灰色。

示例二：遍历多个元素并查询其属性值

在这个示例中，我们将使用.each()方法来遍历多个元素，并查询这些元素的属性值。假设我们有如下的HTML代码：

<div class="box" data-type="apple">苹果</div>
<div class="box" data-type="orange">橙子</div>
<div class="box" data-type="pear">梨子</div>

我们需要选中.box类的所有元素，并遍历这些元素来查询它们的data-type属性值。代码如下：

var boxes = $('.box');
boxes.each(function(index, element){
  var type = $(this).attr('data-type');
  console.log(type);
});

首先，我们将所有.box元素存储在一个jQuery对象中。然后，使用.each()方法来遍历这些元素，并在回调函数中查询元素的data-type属性值，并将这个值打印到控制台中。

总结

通过本文学习，我们了解了.each()方法的基本用法，并通过两个示例学习了如何使用这个方法来遍历多个元素并对它们进行操作。.each()方法是jQuery中非常重要的一个方法，掌握它能够帮助我们更加有效地操作DOM元素。