Bagaimana cara memilih elemen anak terakhir di jQuery?

90

Bagaimana cara memilih elemen anak terakhir di jQuery?

Hanya anak terakhir, bukan keturunannya.

jquery jquery-selectors cinta musim semi
sumber

Jawaban:

130

Anda juga bisa melakukan ini:

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

:terakhir

.children (). last ()

:anak terakhir

Yoram de Langen
sumber
4
Saya tidak berpikir children().last()dan :last-childsetara. Dalam contoh ini - ya, tetapi bayangkan Anda memiliki dua daftar (class = "contoh") dan kemudian mencoba untuk memilih elemen terakhir dari kedua daftar ...
alekwisnia
@alekwisnia lihat contoh saya di bawah ini.
Philip
1
jalan mana yang tercepat?
Vic
@Vic Saya tidak dapat memberikan jawaban yang tepat tetapi opsi 3 akan menjadi logis. Karena opsi 2 melompat dua kali ke DOM dengan menggunakan children(). Opsi 1 melakukannya sekali, tetapi memiliki pemilih semu custom / jQuery :lastdan :last-childsudah cukup lama berada di sini, apakah menurut saya itu akan menjadi yang tercepat dan membutuhkan waktu kalkulasi lebih sedikit untuk mencapai hasil.
Yoram de Langen
48

Untuk kinerja:

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

atau jika Anda menginginkan anak terakhir dengan kelas tertentu seperti yang dikomentari di atas.

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

atau elemen anak tertentu dengan kelas tertentu

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

Untuk 2019 ...

jQuery 3.4.0 tidak digunakan lagi: pertama,: terakhir,: eq,: genap,: ganjil,: lt,: gt, dan: nth. Saat kami menghapus Sizzle, kami akan menggantinya dengan pembungkus kecil di sekitar querySelectorAll, dan hampir tidak mungkin untuk menerapkan ulang pemilih ini tanpa mesin pemilih yang lebih besar.

Kami pikir trade-off ini sepadan. Perlu diingat bahwa kami masih akan mendukung metode posisi, seperti .first, .last, dan .eq. Apa pun yang dapat Anda lakukan dengan pemilih posisi, Anda dapat melakukannya dengan metode posisi. Bagaimanapun, mereka tampil lebih baik.

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

Jadi Anda sekarang harus menggunakan .first(), .last()sebagai gantinya (atau tanpa jQuery).

Christophe Roussy
sumber
1

Jika Anda ingin memilih turunan terakhir dan perlu lebih spesifik tentang jenis elemen, Anda dapat menggunakan selektor tipe terakhir

Berikut ini contohnya:

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

Dalam contoh di atas, Paragraf 4 dan Paragraf 5 akan memiliki batas berwarna merah karena Paragraf 5 adalah elemen terakhir dari jenis "p" di div dan Paragraf 4 adalah "rentang" terakhir di div.

ScottyG
sumber
1

Halo semua. Silakan coba properti ini

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

Terima kasih

subindas pm
sumber