jquery - eq 和 nth-child DOM 搜索

Question

通过在我的浏览器中进行测试，似乎 eq 从上到下搜索 DOM 树，并在找到第一个元素后停止。

而 nth-child 从上到下搜索整个 DOM 树，并沿途针对所有相关元素。

例子：

$('div').children('p:nth-child(2)').css('color', 'red')

$('div').children('p').eq(3).text('text edited with (eq)');

eq 找到元素后实际上会停止 DOM 搜索吗？

Answer 1

在这两种情况下，将首先在整个 DOM 中搜索 DIV。

在第一种情况下，将检查这些 DIV 的第三个孩子是否是 P。这是一个非常短的搜索，因为它不是在寻找第三个段落，而是第三个孩子。所以，是的，它在指定的第 n 个孩子之后停止，无论元素类型如何，因为它不需要进一步搜索。

在第二种情况下，查询搜索所有 P（即那些 DIV 的子级），然后搜索该子集以查看是否有第三段。因此，在这种情况下，它不会在第 3 个 P 处停止，因为它首先找到所有 P，然后逐渐减少。