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 代码的第 1 行和第 2 行给我不同的输出。

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)")最多可以return一个元素。

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

Answer 2

您可以通过以下 link 来更好地处理 :eq & .eq() https://forum.jquery.com/topic/eq-vs-eq

如果您仍然有疑问，这里可能是这个问题的重复： Difference between ":eq()" and .eq()

Answer 3

alert($("ul li:eq(0)").length); => ul 中第一个 li 的长度，:eq(0) 总是 returns 1 或 0 个元素。

alert($("ul").find("li:eq(0)").length); => li 在 ul 中退出的次数

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

内退出的次数长度

jQuery selectors confusing