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 。

在.each()的jQuery 文檔中提到了它：

注意：大多數返回 jQuery object 的 jQuery 方法也循環遍歷 jQuery 集合中的元素集——這個過程稱為隱式迭代。 發生這種情況時，通常不需要顯式地使用.each()方法進行迭代。

使用$('.link')選擇某些內容會返回一個選擇，這類似於滿足選擇器中列出的條件的項目列表（在本例中為帶有 class link的元素）。 選擇本身不會遍歷任何內容，它只是為您提供一個項目列表。

根據您之后對 Selection 所做的操作，可能會發生隱式迭代。 例如，大多數設置器就是這種情況（在您的情況下.on() ）。 設置器將遍歷選擇並應用於其中的所有項目。

不隱式迭代的函數（通常是 Getters）是您想要使用.each()迭代自己的地方，如果您需要它們在多個項目上運行。