在jQuery和javascript中選擇父級的前0-n個子級的最佳性能

Question

我想選擇特定父母下的前n個孩子。 對於這種情況，除非性能最佳，否則我不想使用每個索引。

例：

// select first 20 child elements
var twentyChildElements = $("div").children("span(20)"); 

<div>
 <span index="1"/>
 <span index="2"/>
 <span index="3"/>
....
 <span index="n"/>
</div>

Answer 1

您可以使用:lt偽選擇器：

var twentyChildElements = $("div > span:lt(20)");

>表示直接子級 ，而:lt(2)表示與選擇器匹配的前20個元素（它是從零開始的，因此返回元素0到19）。

Answer 2

只需使用jQuery的slice ：

var twentyChildElements = $("div").children("span").slice(0, 20); 

另請參見此性能測試用例 -它總是比:lt(n)更快，但是可以被本機選擇器引擎勝過。

Answer 3

您可以使用:lt方法：

$("div").children("span:lt(n)")

Answer 4

看中...讓CSS做這項工作！ ;）

使用否定的nth-child組合選擇器。 MDN第n個子選擇器

var twentyChildElements = $("div > span:nth-child(-n+20)");