Как выбрать последний дочерний элемент в jQuery?

93

Как выбрать последний дочерний элемент в jQuery?

Только последний ребенок, а не его потомки.

jquery jquery-selectors весна любви
источник

Ответы:

134

Вы также можете сделать это:

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

:последний ребенок

Йорам де Ланген
источник
4
Не думаю children().last()и :last-childравно. В этом примере - да, но представьте, что у вас есть два списка (class = "example"), а затем вы пытаетесь выбрать последние элементы из обоих списков ...
Алеквисния
@alekwisnia см. мой пример ниже.
Филипп
1
какой путь самый быстрый?
Вик,
@Vic Я не могу дать вам точного ответа, но вариант 3 был бы логичным. Поскольку вариант 2 дважды прыгает в DOM с помощью children(). Вариант 1 делает это один раз, но имеет настраиваемый псевдоселектор / jQuery :lastи :last-childуже довольно долго здесь, мне кажется, это будет самым быстрым и требует меньше времени на расчет для достижения результата.
Йорам де Ланген
49

Для выступления:

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

или если вам нужны последние дети с определенным классом, как указано выше.

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

или конкретный дочерний элемент с определенным классом

$('#example').children('li.test').last()
Филип
источник
2

Если вы хотите выбрать последнего дочернего элемента и вам нужно указать тип элемента, вы можете использовать селектор 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 является последним элементом типа «p» в div, а параграф 4 - последним «диапазоном» в div.

ScottyG
источник
2

На 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).

Кристоф Русси
источник
1

Привет всем, пожалуйста, попробуйте это свойство

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

благодаря

subindas pm
источник