Wie wähle ich das letzte untergeordnete Element in jQuery aus?

86

Wie wähle ich das letzte untergeordnete Element in jQuery aus?

Nur das letzte Kind, nicht seine Nachkommen.

jquery jquery-selectors Liebesfrühling
quelle

Antworten:

124

Sie können dies auch tun:

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

:zuletzt

.children (). last ()

:letztes Kind

Yoram de Langen
quelle
4
Ich denke nicht children().last()und :last-childist gleich. In diesem Beispiel - ja, aber stellen Sie sich vor, Sie haben zwei Listen (class = "example") und versuchen Sie dann, die letzten Elemente aus beiden Listen auszuwählen ...
alekwisnia
@alekwisnia siehe mein Beispiel unten.
Philip
1
Welcher Weg ist der schnellste?
Vic
@Vic Ich kann Ihnen keine genaue Antwort geben, aber Option 3 wäre logisch. Weil Option 2 mit zweimal in das DOM springt children(). Option 1 macht es einmal, hat aber einen benutzerdefinierten / jQuery-Pseudo-Selektor :lastund ist :last-childschon ziemlich lange hier. Scheint mir, dass dies am schnellsten wäre und weniger Rechenzeit benötigt, um das Ergebnis zu erzielen.
Yoram de Langen
47

Für die Leistung:

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

oder wenn Sie ein letztes Kind mit einer bestimmten Klasse wollen, wie oben kommentiert.

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

oder ein bestimmtes untergeordnetes Element mit einer bestimmten Klasse

$('#example').children('li.test').last()
Philip
quelle
2

Für 2019 ...

jQuery 3.4.0 ist veraltet: first ,: last ,: eq ,: gerade ,: ungerade ,: lt ,: gt und: nth. Wenn wir Sizzle entfernen, ersetzen wir es durch einen kleinen Wrapper um querySelectorAll, und es wäre fast unmöglich, diese Selektoren ohne eine größere Selector-Engine erneut zu implementieren.

Wir denken, dieser Kompromiss ist es wert. Denken Sie daran, dass wir weiterhin die Positionsmethoden wie .first, .last und .eq unterstützen. Alles, was Sie mit Positionswählern tun können, können Sie stattdessen mit Positionsmethoden tun. Sie schneiden sowieso besser ab.

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

So können Sie jetzt sein sollte mit sein .first(), .last()statt (oder keine jQuery).

Christophe Roussy
quelle
1

Wenn Sie das letzte untergeordnete Element auswählen möchten und für den Elementtyp spezifisch sein müssen, können Sie den Selektor last-of-type verwenden

Hier ist ein Beispiel:

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

Im obigen Beispiel haben sowohl Absatz 4 als auch Absatz 5 einen roten Rand, da Absatz 5 das letzte Element vom Typ "p" im div und Absatz 4 das letzte "span" im div ist.

ScottyG
quelle
0

Hallo zusammen, bitte versuchen Sie diese Eigenschaft

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

Vielen Dank

subindas pm
quelle