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

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

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

您也可以这样做：

<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();

：持续

.children（）。last（）

：最后一个孩子

对于性能：

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

或者，如果您想让最后一个孩子上一堂课，如上所述。

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

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

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

通过使用：last-child选择器？

您是否有需要帮助的特定情况？

对于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）。

如果要选择最后一个子元素，并且需要具体说明元素类型，则可以使用选择器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”。

大家好，请尝试此属性

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

谢谢