另一个概念视频!这是在 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
哈哈!故障排除太搞笑了。这正是我自己一直做的事情,直到“恍然大悟”的那一刻。
当然,您将此作为屏幕录像的一部分保留下来是很好的。
观看起来很有趣。我是一个新手,犯了太多错误,没有资格评判,但由于我在这个错误上立即发现了它,所以我忍不住笑了。它确实为故障排除技术提供了一个很好的教训。将其注释掉直到它起作用。顺便说一句,视频很棒。
我同意,Chris,保留这些错误非常棒,因为它有助于了解如何思考。我喜欢你教学的方式。
哈哈。有趣的结尾。很棒的视频集——确实使一些概念很容易理解。谢谢。
当 css 方法缺失时,为什么显式迭代(字符计数)停止工作?这些迭代不应该彼此独立吗?