使用jquery中的each()有什么特殊用途吗？

Question

这是我的代码.. 我们可以通过使用选择器来完成与使用.each()相同的工作，如下所示

$( "li" ).addClass( "foo" );

那么为什么要使用它呢？

$( "li" ).each(function() {
  $( this ).addClass( "foo" );
});

- eddysapata

---

这取决于您正在处理的复杂性和任务。如果您只是在处理具有属性值 = something的特定元素，则应使用addClass。在这种情况下，请使用.each。 - Murali Murugesan

Answer 1

在您的示例中，使用 addClass 可以作用于选择器内的所有元素，因此没有必要使用 each。

然而，有些情况下需要获取选择器中每个特定元素的数据，这就是为什么会使用 each()。代码如下：

$('.foo').each(function() {
    var bar = $(this).data('unique-information'); // this would be different on each .foo element
    $(this).plugin({
        some-setting: bar
    });
});

- Rory McCrossan

---

@PatrickHofman 这是真的。我唯一的伴侣就是这些毫无价值的网络积分 ;) - Rory McCrossan

哎呀，我甚至没有仓库:P 我需要15个仓库才能投票支持.. :) 我是新来的.. @PatrickHofman :) 一个月前加入了stackoverflow.. :P - eddysapata

哎呀，我甚至没有仓库:P 我需要15个仓库才能投票支持.. :) 我是新来的.. @RoryMcCrossan :) 一个月前加入了stackoverflow.. :P - eddysapata

@RoryMcCrossan：现在你有额外的10个 ;) - Patrick Hofman

Answer 2

当您想为每个元素执行不同的操作时，请使用each。第一种情况将对所有匹配元素应用通用操作。

在您的示例中，第一种情况是正确的方法。 更新： 以下是您需要使用each的示例。考虑下面的html：

<ul>
    <li class="change-bg-and-add-p"></li>
    <li class="change-bg-and-add-div"></li>
    <li class="do-nothing"></li>
</ul>

如果您需要根据类更改每个

元素，您会怎么做？这在您的第一个示例中是不可能的。但是，通过使用，您可以在循环遍历每个匹配元素时更改每个

。

- Sang Suantak

Answer 3

在这种情况下，each方法没有添加价值。

如果您想对每个元素进行更多的计算，您需要使用each方法。

考虑以下示例：

var i = 0;

$( "li" ).each(function() {
  if (i/2 == 0)
  {
      $( this ).addClass( "foo-even" );
  }
  else
  {
      $( this ).addClass( "foo-odd" );
  }

  i = i + 1;
});

在这里，你需要使用each，因为你想根据某些计算对每个项目采取不同的行动。

- Patrick Hofman

---

哦，这意味着each()作为一个循环，遍历每个li元素或者无论是什么元素。@patrick - eddysapata

Answer 4

.each 用于将函数应用于一组 HTML 元素，其中您可能对每个元素要执行的操作有不同的条件，而您提出的第一个语句则将相同的操作应用于名称的所有元素。在您的示例中，.each 方法完全没有意义，因为您可以更好地使用 addClass 在“li”上进行操作。

- benderman

---

好的，谢谢，现在我明白了。 这意味着当我们想要遍历各种li时，我们需要使用.each()。 每次循环时我们都会得到不同的值，然后我们可以相应地完成工作.. :) @benderman :) - eddysapata

没错。对于每个li执行不同的操作，$.each()是正确的函数。但是如果你可以对所有元素应用单个函数（如addClass），那么始终这样做会使它更简单。 - benderman

Answer 5

有时候你必须做一些更复杂的事情：

$( "li" ).each(function() {
  klass = $(this).attr('data-class');
  $( this ).addClass( klass );
});

- mus