如何选择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();

对于性能：

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

或者，如果你想和上面提到的某个类有最后一个孩子

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

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

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

---

如果要选择最后一个子元素，并且需要特定于元素类型，则可以使用选择器

以下是一个例子：

$("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。

Hi all请尝试此属性

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

感谢2019年

jQuery3.4.0正在弃用：first、：last、：eq、：偶数、：奇数、：lt、：gt、， 和：n。当我们移除Sizzle时，我们将用一个小包装来替换它 在querySelectorAll周围，几乎不可能 在不使用更大的选择器引擎的情况下重新实现这些选择器

我们认为这种权衡是值得的。请记住，我们仍然支持位置方法，例如.first、.last和.eq。使用位置选择器可以执行的任何操作，都可以使用位置方法。无论如何，他们的表现更好

---

所以现在应该使用.first、.last或no jQuery。

我不认为children.last和：last child是相等的。在本例中-是的，但假设您有两个列表class=example，然后尝试从两个列表中选择最后一个元素…@alekwisnia请参见下面的示例。哪种方式最快？@Vic我无法给出确切的答案，但选项3是合乎逻辑的。因为选项2通过使用子对象两次跳入DOM。选项1只做了一次，但是有一个自定义的/jQuery伪选择器：last和：last child已经在这里很长时间了，在我看来，这是最快的，并且需要更少的计算时间来实现结果。