Wie wähle ich das letzte untergeordnete Element in jQuery aus?
Nur das letzte Kind, nicht seine Nachkommen.
Wie wähle ich das letzte untergeordnete Element in jQuery aus?
Nur das letzte Kind, nicht seine Nachkommen.
Antworten:
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();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.
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()Mit dem : last-child-Selektor ?
Haben Sie ein bestimmtes Szenario im Sinn, bei dem Sie Hilfe benötigen?
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).
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.
Hallo zusammen, bitte versuchen Sie diese Eigenschaft
$( "p span" ).last().addClass( "highlight" );Vielen Dank
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 ...