使用 JQuery 时的 ":last-of-type" 或 ".last()"

Posted 2023-05-09

【中文标题】使用 JQuery 时的 ":last-of-type" 或 ".last()"

【英文标题】：":last-of-type" or ".last()" when using JQuery

【发布时间】：2017-03-04 08:14:07

【问题描述】：

:last-of-type (as of v1.9) vs .last() (as of v1.4)：两种方法都可以，但谁能告诉我哪种方法效率更高？

例子：

$(".item").last();

$(".item:last-of-type");

".last()" 的使用时间更长（从 v1.4 开始）。 JQuery 是否具有内置的“:last-of-type”，还是只是利用 CSS 和捎带浏览器的功能？谁能证实这一点？

在我看来，如果是这种情况，“:last-of-type”在适用时会更好。

【问题讨论】：

为什么不运行一些 jsperf 测试？

一般来说，jQuery 选择器会尽可能使用原生选择器。

选择器执行两种不同的选择，不是吗？

他们甚至不做同样的事情，last() 只是获取集合中的最后一个元素，而:last-of-type 查询 DOM 并找到它的最后一个类型的所有元素父元素，即在具有相同标记名的兄弟之间

我确实理解其中的区别，我并不是说他们做的事情完全相同。我试图弄清楚我应该使用哪一个来提高效率。就比较而言，你是对的。也许 ":last" (link) 而不是 ":last-of-type" 会是一个更好的例子？

【参考方案1】：

.last() 更快。

注意，选择器执行不同的选择

:last-of-type

最后一个类型选择器

描述：选择所有的兄弟姐妹中的最后一个元素 相同的元素名称。

.last()

.last()

描述：将匹配元素的集合减少到最后一个 集合。

console.time("lastOfType");
$(".item:last-of-type");
console.timeEnd("lastOfType");

console.time("last");
$(".item").last();
console.timeEnd("last");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

【讨论】：

我理解这些差异。感谢您指出了这一点。你知道为什么“last()”更高效吗？

.last() 只选择选择器或集合的最后一个元素。 :last-of-type 可以选择多个元素。

我尝试了$(".item:last") 与$(".item").last()，但仍然发现它更慢。我仍然不明白为什么它会变慢的那部分......：-/

@JoePC 没有检查所有的 jQuery : 选择器；不确定它们通常是否比链接到过滤功能的单个选择器花费更多时间来返回结果。在从document 中选择一个元素之前，jQuery 在内部必须解析:pseudo 选择器字符串。 jQuery文档中.last()和:last的描述是一样的吗？