Як вибрати останній дочірній елемент у 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()

За допомогою селектора: 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).

Якщо ви хочете вибрати останню дочірню особу і вам потрібно визначити тип елемента, ви можете скористатися селектором останнього типу

Ось приклад:

$("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 є останнім елементом типу "p" у div, а параграф 4 - останнім "діапазоном" у div.

Привіт усім, спробуйте цей заклад

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

Дякую