jQuery选择器迭代所有元素吗?

Question

我的页面上有多个链接，我想为所有这些链接创建相同的事件处理程序

在第一个例子中，我只是使用一个选择器，它为两个链接正确创建事件处理程序:

$(document).ready(function () {
$('.link').on('click', function () {
alert($(this).text() + ' was clicked');
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='#' class='link'>Link1</a>
<a href='#' class='link'>Link2</a>

在第二个示例中，我遍历每个元素并为每个元素创建事件处理程序:

$(document).ready(function () {
$('.link').each(function(){
$(this).on('click', function(){
alert($(this).text() + ' was clicked');
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='#' class='link'>Link1</a>
<a href='#' class='link'>Link2</a>

两者都产生相同的结果，但为什么呢?jQuery选择器是否已经遍历了所有元素?jQuery选择器总是吗?迭代所有元素还是只在某些场景中迭代?

Answer 1

你正在寻找的概念被称为隐式迭代。

在.each()的jQuery文档中有提到:

注意:大多数返回jQuery对象的jQuery方法也循环遍历jQuery集合中的元素集——这个过程被称为隐式迭代。当这种情况发生时，通常不需要显式地迭代.each()方法。

使用$('.link')选择一些东西返回一个选择，这就像一个满足选择器中列出的标准的项目列表(在这种情况下具有link类的元素)。选择本身并不迭代任何东西，它只是为您提供一个项目列表。

根据您随后对Selection所做的操作，可能会发生隐式迭代。这就是大多数setter的例子(在你的例子中是.on())。setter将遍历所选内容，并应用于其中的所有项。

不隐式迭代的函数(通常是getter)，如果你需要在多个项目上运行它们，你需要使用.each()来迭代自己。