#10:显式迭代与隐式迭代

另一个概念视频!这是在 jQuery 中你需要理解的“其中一件事”。它实际上对 jQuery 来说有点独特,因为过去其他流行的 JavaScript 库没有以这种方式实现。

我们已经涵盖了相当多的选择器。例如,您已经知道 $("p") 将选择页面上的所有段落。不仅仅是第一个或某个随机的段落,而是所有段落。您可以很容易地想象页面上可能有许多这样的段落。现在想象一下,当您执行以下操作时会发生什么

$("p").hide();

它们都会被隐藏,对吧?没错。不是第一个或某个随机的,而是所有。这就是**隐式迭代**。在后台,jQuery 会自动循环遍历它找到的整个元素集,并在其上运行您选择的方法。我们不需要自己编写循环来做到这一点。如果您接触 JavaScript 的第一个库是 jQuery,这似乎很明显,但过去许多库都要求您自己遍历元素集合。

如果需要,您仍然可以自己编写循环。使用 jQuery 循环方法,它可能看起来像这样

$("p").each(function() {
  $(this).hide();
});

这几乎是一样的。不完全一样,但您可以这样做。这就是**显式迭代**。

有时您需要进行显式迭代。基本上,如果我们需要访问this的值并对其进行特殊处理,我们将需要我们自己的循环结构来处理。

此屏幕录像中的示例是计算列表项中的字符并将它们附加到字符串的末尾。为此,我们需要显式迭代。

查看 CodePen 上 Chris Coyier 的作品 4b53b9f55662d0d26339e18277500eee (@chriscoyier)

我们在这里使用了 jQuery 的 each() 方法,这非常适合我们的需求。它为我们做的一件有用的事情是在每次迭代中都提供一个从零开始的计数器,如果需要,我们可以访问它。

$(".there-are-three-of-me").each(function(i) {
  
  console.log(i);
  
}); 

// 0
// 1
// 2