Bagaimana untuk mendapatkan elemen kanak-kanak dalam jquery

PHPz
Lepaskan: 2023-05-23 18:04:07
asal
9798 orang telah melayarinya

Apabila menggunakan jQuery untuk melaksanakan operasi DOM, anda selalunya perlu mendapatkan elemen anak elemen untuk langkah seterusnya. Artikel ini akan menerangkan secara terperinci cara menggunakan jQuery untuk mendapatkan elemen kanak-kanak.

1. pemilih elemen kanak-kanak jQuery

Dalam jQuery, anda boleh menggunakan pemilih elemen kanak-kanak untuk mendapatkan elemen kanak-kanak. Pemilih elemen kanak-kanak menggunakan simbol ">", yang memilih elemen anak langsung sesuatu elemen.

Sebagai contoh, anda boleh menggunakan kod berikut untuk mendapatkan semua elemen anak langsung elemen dengan id induk:

$("#parent > *")
Salin selepas log masuk

Di mana, simbol "*" mewakili semua elemen.

Jika anda ingin mendapatkan elemen yang kelasnya adalah anak antara elemen anak langsung dengan id unsur induk, anda boleh menggunakan kod berikut:

$("#parent > .child")
Salin selepas log masuk

di mana "" mewakili pemilih kelas .

2. kaedah traversal sub-elemen jQuery

jQuery menyediakan satu siri kaedah untuk melintasi sub-elemen sesuatu elemen. Kaedah

  1. kanak-kanak()

kanak-kanak() mengembalikan semua anak langsung bagi elemen yang ditentukan. Ia tidak mengembalikan semua unsur keturunan.

Sebagai contoh, kod berikut boleh mengembalikan semua elemen anak langsung semua elemen dengan id induk:

$("#parent").children()
Salin selepas log masuk

Jika anda ingin mendapatkan kelas elemen anak dalam elemen anak langsung dengan id Elemen elemen induk, anda boleh menggunakan kod berikut:

$("#parent").children(".child")
Salin selepas log masuk
  1. find()

find() kaedah mengembalikan elemen turunan elemen yang ditentukan. Ia mengembalikan semua unsur keturunan unsur yang ditentukan, bukan hanya anak langsung.

Sebagai contoh, kod berikut boleh mengembalikan semua elemen keturunan dengan anak kelas dalam elemen dengan induk id:

$("#parent").find(".child")
Salin selepas log masuk
  1. next()

next () kaedah mengembalikan elemen adik beradik seterusnya bagi elemen yang diberikan. Jika tiada unsur adik beradik seterusnya, objek jQuery kosong dikembalikan.

Sebagai contoh, kod berikut boleh mengembalikan elemen adik beradik seterusnya bagi elemen dengan id ibu bapa:

$("#parent").next()
Salin selepas log masuk
  1. prev()

prev () kaedah Mengembalikan adik beradik sebelumnya bagi elemen yang diberikan. Jika tiada unsur adik beradik sebelumnya, objek jQuery kosong dikembalikan.

Sebagai contoh, kod berikut boleh mengembalikan elemen adik beradik sebelumnya bagi elemen dengan id ibu bapa:

$("#parent").prev()
Salin selepas log masuk
  1. siblings()

adik beradik () kaedah Mengembalikan semua adik-beradik elemen yang ditentukan. Elemen adik beradik ialah semua elemen yang mempunyai elemen induk yang sama dengan elemen yang ditentukan.

Sebagai contoh, kod berikut boleh mengembalikan semua elemen adik-beradik elemen dengan id induk:

$("#parent").siblings()
Salin selepas log masuk
  1. first()

first( ) kaedah mengembalikan Elemen anak pertama bagi elemen yang ditentukan.

Sebagai contoh, kod berikut boleh mengembalikan elemen anak pertama elemen dengan id induk:

$("#parent").children().first()
Salin selepas log masuk
  1. last()

last () Kaedah mengembalikan elemen anak terakhir bagi elemen yang ditentukan.

Sebagai contoh, kod berikut boleh mengembalikan elemen anak terakhir elemen dengan id induk:

$("#parent").children().last()
Salin selepas log masuk

3 Kod sampel

Berikut ialah sampel mudah kod, gunakan Untuk menerangkan cara menggunakan jQuery untuk mendapatkan elemen kanak-kanak:




    
    jQuery获取子级元素示例
    


    
子元素1
子元素2
子元素3
Salin selepas log masuk

Di atas ialah kaedah dan kod contoh tentang cara menggunakan jQuery untuk mendapatkan elemen kanak-kanak. Apabila anda perlu mengendalikan sub-elemen, sila pilih kaedah yang sesuai berdasarkan situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan elemen kanak-kanak dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!