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>

上記の例では、段落5がdivの「p」タイプの最後の要素であり、段落4がdivの最後の「スパン」であるため、段落4と段落5の両方に赤い境界線があります。

みなさん、こんにちは。この物件をお試しください

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

ありがとう