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

Question

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

只选择最后一个子元素，而不是它的后代。

- lovespring

Answer 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

- Yoram de Langen

---

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

@alekwisnia 请看下面的例子。 - Philip

哪种方式最快？ - Vic

@Vic，我不能给你确切的答案，但选项3似乎是最合理的。因为选项2使用了 children()，会跳入 DOM 两次。选项1只跳入一次，但使用了自定义/jQuery 伪选择器 :last 和:last-child，由于它们已经存在了很长时间，所以它似乎是最快并且需要更少的计算时间来实现结果。 - Yoram de Langen

$('#example').children().last() 对我来说运行良好。 - w.Daya

Answer 2

为了性能表现：

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

或者，如果你想要一个具有特定类的最后一个子元素，就像上面所评论的那样。

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

或者一个具有特定类的特定子元素

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

- Philip

Answer 3

通过使用:last-child选择器？您有特定的场景需要帮助吗？

- Brad Christie

Answer 4

在jQuery 3.4.0版本中，以下选择器将被弃用：:first，:last，:eq，:even，:odd，:lt和:gt。当我们移除Sizzle时，我们将用querySelectorAll包装一个小包装器来替换它，如果没有更大的选择器引擎，几乎不可能重新实现这些选择器。

我们认为这种权衡是值得的。请记住，我们仍然支持定位方法，例如.first，.last和.eq。使用定位方法可以完成任何您可以使用定位选择器完成的操作，而且它们的性能更好。

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

所以现在，您应该使用.first()，.last()（或不使用jQuery）。

- Christophe Roussy

Answer 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”。

- ScottyG

Answer 6

大家好，请尝试这个属性

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

谢谢

- subindas pm