jQuery 选择器令人困惑

Question

如果有人也向我指出理论来源，以便我可以更好地掌握它，我将不胜感激。

假设我有以下 HTML:

<ul>
  <li>1</li>
</ul>

<ul>
  <li>2</li>
</ul>

以及这段 JavaScript 代码:

alert($("ul li:eq(0)").length);

alert($("ul").find("li:eq(0)").length);

alert($("ul").find("li").eq(0).length);

我得到 1,2,1 作为输出。我可以理解为什么我在最后一个例子中得到 1，但是为什么 JavaScript 代码的第一行和第二行给出了不同的输出。

fiddle : https://jsfiddle.net/ishansoni22/pntz6kfx/

Answer 1

eq 是一个奇怪的 jQuery 选择器，与大多数选择器基于 CSS 的逻辑并不真正一致(在此 documentation 摘录中强调我的):

The index-related selectors (:eq(), :lt(), :gt(), :even, :odd) filter the set of elements that have matched the expressions that precede them

简而言之，第一种情况中的eq(0)适用于整体ul li。

$("anything :eq(0)") 最多可以返回一个元素。

在第二种情况下，"li:eq(0)" 选择器由 find 应用到 $("ul") 的所有匹配项.