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

Question

如何选择jQuery中的最后一个子元素？只是最后一个孩子，而不是其后代。

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

Answer 2

对于性能：

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

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

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

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

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

Answer 3

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