Jak wybrać ostatni element podrzędny w jQuery?

90

Jak wybrać ostatni element podrzędny w jQuery?

Tylko ostatnie dziecko, a nie jego potomkowie.

jquery jquery-selectors kocha wiosnę
źródło

Odpowiedzi:

130

Możesz też to zrobić:

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

:ostatni, ubiegły, zeszły

.children (). last ()

:ostatnie dziecko

Yoram de Langen
źródło
4
Nie myślę children().last()i :last-childjest równy. W tym przykładzie - tak, ale wyobraź sobie, że masz dwie listy (class = "example"), a następnie spróbuj wybrać ostatnie elementy z obu list ...
alekwisnia
@alekwisnia zobacz mój przykład poniżej.
Philip
1
która droga jest najszybsza?
Vic,
@Vic Nie mogę podać dokładnej odpowiedzi, ale opcje 3 byłyby logiczne. Ponieważ opcja 2 przeskakuje dwukrotnie do DOM przy użyciu children(). Opcja 1 robi to raz, ale ma niestandardowy pseudoselektor / jQuery :lasti :last-childjestem tu już dość długo, czy wydaje mi się, że byłaby najszybsza i zajmuje mniej czasu obliczeń, aby osiągnąć wynik.
Yoram de Langen
48

Dla wydajności:

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

lub jeśli chcesz mieć ostatnie dzieci z pewną klasą, jak wspomniano powyżej.

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

lub określony element potomny z określoną klasą

$('#example').children('li.test').last()
Philip
źródło
2

Na rok 2019 ...

jQuery 3.4.0 jest przestarzałe: first,: last,: eq,: even,: odd,: lt,: gt i: nth. Po usunięciu Sizzle zastąpimy go małym opakowaniem wokół querySelectorAll i ponowne zaimplementowanie tych selektorów bez większego silnika selektorów byłoby prawie niemożliwe.

Uważamy, że ten kompromis jest tego wart. Pamiętaj, że nadal będziemy obsługiwać metody pozycyjne, takie jak .first, .last i .eq. Cokolwiek możesz zrobić z selektorami pozycyjnymi, możesz zamiast tego zrobić z metodami pozycyjnymi. I tak radzą sobie lepiej.

https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/

Więc powinieneś być teraz przy użyciu .first(), .last()zamiast (lub bez jQuery).

Christophe Roussy
źródło
1

Jeśli chcesz wybrać ostatnie dziecko i musisz określić typ elementu, możesz użyć selektora last-of-type

Oto przykład:

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

W powyższym przykładzie zarówno paragraf 4, jak i akapit 5 będą miały czerwoną obwódkę, ponieważ akapit 5 to ostatni element typu „p” w div, a akapit 4 to ostatni „zakres” w div.

ScottyG
źródło
1

Witam wszystkich Proszę spróbować tej właściwości

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

Dzięki

subindas pm
źródło