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

How to select last child element in jQuery?

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

Just the last child, not its descendants.

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

4 个解决方案

#1

You can also do this:

你也可以这样做:

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

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

:last

:去年

.children().last()

.last定格()()

:last-child

:胎

#2

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

or if you want a last children with a certain class as commented above.

或者，如果你想要最后一个孩子，有一个特定的类，如上所述。

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

or a specific child element with a specific class

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

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

#3

By using the :last-child selector?

通过使用:last-child选择器?

Do you have a specific scenario in mind you need assistance with?

你是否有需要帮助的特定场景?

#4

If you want to select the last child and need to be specific on the element type you can use the selector last-of-type

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

Here is an example:

这是一个例子:

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

In the example above both Paragraph 4 and Paragraph 5 will have a red border since Paragraph 5 is the last element of "p" type in the div and Paragraph 4 is the last "span" in the div.

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