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行给出了不同的输出。

小提琴： https://jsfiddle.net/ishansoni22/pntz6kfx/

Answer 1

eq是一个奇怪的jQuery选择器，与大多数选择器的基于CSS的逻辑并不完全一致（在documentation提取中强调我的）：

  

与索引相关的选择器（：eq（），：lt（），：gt（）,: even，：odd）过滤匹配前面的表达式的元素集

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

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

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

Answer 2

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

alert($("ul").find("li:eq(0)").length); =＆gt; li在ul

内退出的次数

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

中ul退出的次数的长度

Answer 3

您可以通过以下链接更好地处理：eq＆amp; .EQ（） https://forum.jquery.com/topic/eq-vs-eq

如果您仍有疑问，可以回复此问题： Difference between ":eq()" and .eq()