jQuery 中的 :last 和 :last-of-type 有什么区别？答案

【问题标题】：What is the difference between :last and :last-of-type in jQuery?jQuery 中的 :last 和 :last-of-type 有什么区别？
【发布时间】：2012-08-27 01:19:55
【问题描述】：

请看这张图片：

有人能解释一下区别吗？

编辑

让我指出让我感到困惑的地方。请注意：

$row.is('tr.items:last') === false
$row[0].id === $('tr.items:last')[0].id

这两种说法似乎相互矛盾。第一个告诉我们$row 不是tr.items 的最后一个。但第二个告诉$row 正是$('tr.items:last')，即tr.items 的最后一个。

:last-of-type 选择器不会发生这种情况。

这是怎么回事？

【问题讨论】：

row[0] === $('tr.items:last')[0] 产生 true 吗？
确实如此 - 请参阅问题的另一个编辑。

标签： jquery

【解决方案1】：

在设置像:last 这样的过滤器时，jQuery 为.is 提供了不同的过滤器机制。关键是它通常在当前集合上使用.filter，并检查过滤后是否还有任何元素。

这适用于以下情况：

$("<a></a><b></b>").is("b");  // true, there is a <b> after filtering

但是对于:last，这会失败，因为这样的过滤器是相对于集合的。考虑一个包含两个元素的文档：

$("a:first").is("a:last");  // would be true if the same method was used,
                            // because in the set with the first <a> element,
                            // the last <a> element is that element. So filtering
                            // with `a:last` yields something, and `.is` gets you
                            // true.

这与您的预期相反。因此，jQuery 在当前上下文中搜索 a:last 并检查 a:first 在该集合中是否明显。

您的问题是$(ev.target)（在handleKeyDown）使上下文成为输入元素而不是文档（这是通常的情况）。在该上下文中找不到tr.items，您会得到false。这可以说是 jQuery 中的一个错误。

无论如何，你能做的就是检查一个集合。反正用对应的函数比较快：

$row.is( $("tr.items").last() );  // true

【讨论】：

我还是不明白，但假设一切都像你说的那样。 $("tr.items").last() 与 $("tr.items:last") 远远不同。如果我有 100 行，那么第一个表达式将获得 100 行并返回最后一行，而第二个表达式预计将精确定位最后一行。对我来说，这就像在 sql 中执行 SELECT 然后在代码中过滤列表与首先执行 SELECT WHERE 一样。我的意思是，没有人怀疑第二种形式是正确的。那么为什么不推荐使用相对选择器呢？ CSS 现在有了:last-of-type，这正是我需要的。
@mark：抱歉，我有点夸张了。它没有被弃用，但使用那些仅 jQuery 的选择器不允许浏览器的（快速）CSS 选择器。但是:last/.last() 是一样的——在选择tr.items 之后应用:last，调用.last() 也是如此。
让我为我总结一下：1. :last 有问题。 2. 使用.last() 或:last-of-type，后者在旧浏览器中不可用（有多旧？），但如果支持，可能真的比.last() 快。那么问题来了——难道 jQuery 不应该为我们省去这些细节吗？它不应该在支持的地方将:last 实现为:last-of-type，在不支持的地方实现为.last()？
@mark: :last 和 :last-of-type 不是一回事。 :last 实际上只是选择匹配元素的最后一个元素，例如tr:last 为您提供页面上的最后一个 tr 元素。 tr:last-of-type 选择所有tr，它们是它们兄弟姐妹中的最后一个。如果您有两个表，tr:last-of-type 会为您提供两个 <tr> 元素。 tr:last 只会给你一个元素。
哦，我明白了。但这在我的特殊情况下并不重要。鉴于这一重要区别，我的总结是否正确？

【解决方案2】：

last-of-type 是一个 CSS 伪类，代表给定标签名称的最后一个兄弟。它可以作为一个jQuery选择器工作如果浏览器支持querySelectorAll()并且你没有使用jQuery-only选择器；否则，它将使用不支持它的 Sizzle。见thisjQuery 票。

另一方面，:last 是一个 jQuery 选择器，它选择最后匹配的元素。

【讨论】：

可能值得注意的是，:last-of-type 不包含在 jQuery 本身中。当querySelectorAll 失败时（例如在旧浏览器中），具有该伪类的选择器将失败。
更多关于哪些 CSS 选择器没有在 jQuery 中实现的信息：stackoverflow.com/questions/11745274/…
@mark：你能为你的表提供准确的标记吗？有了这个标记，jsfiddle.net/6mues，一切都按预期工作。

【解决方案3】：

:last-of-type 选择具有指定标签名称的最后一个兄弟。请注意，:last-of-type 不是“官方”jQuery 选择器，仅适用于某些浏览器 - 特别是那些支持 document.querySelectorAll()（除 IE 之外的所有内容的较新版本）的浏览器。

【讨论】：