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的逻辑并不完全一致(在本文档摘录中强调我的):

与索引相关的选择器(:eq(),:lt(),:gt(),:even,:odd)过滤与之前的表达式匹配的元素集

简而言之,eq(0)第一种情况适用于整体 ul li.

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

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