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

您要查找的概念称为 Implicit iteration。

在 jQuery Documentation 中提到 .each():

Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration. When this occurs, it is often unnecessary to explicitly iterate with the .each() method.

使用 $('.link') returns 选择来选择某些东西，这就像满足选择器中列出的条件的项目列表（带有 class link 的元素在这种情况下）。选择本身不会遍历任何内容，它只是为您提供一个项目列表。

根据您之后对选择所做的操作，可能会发生隐式迭代。例如，大多数设置器就是这种情况（在您的情况下 .on()）。设置器将迭代选择并应用于其中的所有项目。

不隐式迭代的函数（通常是 Getters）是您想要使用 .each() 自己迭代的地方，如果您需要它们运行在多个项目上。

jQuery 选择器是否遍历所有元素？

Does jQuery selector iterates through all elements?

javascript

jquery

jquery-selectors