如何在jQuery中选择最后一个子元素？

Posted 2023-03-05

【中文标题】如何在jQuery中选择最后一个子元素？

【英文标题】：How to select last child element in jQuery?

【发布时间】：2011-06-04 12:14:17

【问题描述】：

如何在 jQuery 中选择最后一个子元素？

只是最后一个孩子，而不是它的后代。

【参考方案1】：

您也可以这样做：

<ul id="example">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>

// possibility 1
$('#example li:last').val();
// possibility 2
$('#example').children().last()
// possibility 3
$('#example li:last-child').val();

:last

.children().last()

:last-child

【讨论】：

我不认为children().last() 和:last-child 是相等的。在这个例子中 - 是的，但是假设你有两个列表（class="example"），然后尝试从两个列表中选择最后一个元素......

@alekwisnia 见下面我的例子。

哪种方式最快？

@Vic 我不能给你确切的答案，但选项 3 是合乎逻辑的。因为选项 2 使用 children() 两次跳转到 DOM。选项 1 只执行一次，但自定义/jQuery 伪选择器 :last 和 :last-child 已经存在很长时间了，在我看来这将是最快的并且需要更少的计算时间来实现结果。跨度>

$('#example').children().last() 工作正常

【参考方案2】：

性能方面：

$('#example').children().last()

或者，如果您想要最后一个具有上述特定班级的孩子。

$('#example').children('.test').last()

或具有特定类的特定子元素

$('#example').children('li.test').last()

【参考方案3】：

通过使用:last-child selector?

您是否有需要帮助的特定场景？

【参考方案4】：

2019 年 ...

jQuery 3.4.0 正在弃用 :first, :last, :eq, :even, :odd, :lt, :gt, 和:nth。当我们移除 Sizzle 时，我们将用一个小包装器替换它 围绕querySelectorAll，几乎不可能 在没有更大的选择器引擎的情况下重新实现这些选择器。

我们认为这种权衡是值得的。请记住，我们仍将支持位置方法，例如 .first、.last 和 .eq。你可以用位置选择器做的任何事情，你都可以用位置方法来代替。无论如何，它们的表现更好。

https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/

所以你现在应该改用.first()、.last()（或不使用jQuery）。

【参考方案5】：

如果你想选择最后一个子元素并且需要指定元素类型，你可以使用选择器last-of-type

这是一个例子：

$("div p:last-of-type").css("border", "3px solid red");
$("div span:last-of-type").css("border", "3px solid red");

<div id="example">
            <p>This is paragraph 1</p>
            <p>This is paragraph 2</p>
            <span>This is paragraph 3</span>
            <span>This is paragraph 4</span>
            <p>This is paragraph 5</p>
        </div>

在上面的示例中，第 4 段和第 5 段都将有一个红色边框，因为第 5 段是 div 中“p”类型的最后一个元素，而第 4 段是 div 中的最后一个“span”。

【参考方案6】：

大家好，请试试这个属性

$( "p span" ).last().addClass( "highlight" );

谢谢