10 fungsi traversal yang sangat berguna di jQuery

Menggunakan jQuery , Anda dapat dengan mudah memilih elemen HTML . Namun terkadang, ketika struktur HTML lebih kompleks, menyempurnakan elemen yang kita pilih adalah hal yang merepotkan. Dalam tutorial ini, kita akan mengeksplorasi sepuluh cara untuk menyempurnakan dan memperluas koleksi yang akan kita kerjakan.

HTML

Pertama, mari kita lihat halaman sederhana yang ditunjukkan di bawah ini, dan melalui tutorial ini kita akan memilih elemennya.

1. div.container adalah elemen pembungkus;
2. div.photo , div.title , dan div.rating merupakan turunan langsung dari div.container ;
3. Setiap div.star adalah turunan dari div.rating ;
4. Ketika kelas div.satr adalah "on" , itu adalah sta yang lengkap
5. .
6. Mengapa melintasi?

   " Mengapa kita perlu menyempurnakan serangkaian elemen lebih lanjut? Apakah karena sintaks pemilihan jQuery tidak cukup kuat? "

   Oke, mari kita mulai dengan sebuah contoh. Di halaman web yang disebutkan di atas, ketika sebuah bintang diklik, kita perlu menambahkan kelas "on" ke dalamnya dan setiap bintang di sebelah kiri . Pada saat yang sama, kami ingin mengubah warna latar belakang semua elemen induk bintang , sehingga kode kami adalah sebagai berikut:

   Pada baris kedua, kita mendapatkan objek yang saat ini kita klik. Tapi bagaimana cara mendapatkan induk bintang ? Itu div.rating . Namun dalam satu halaman terdapat banyak div.rating . Yang mana yang kita inginkan? Bagaimana cara menempatkan semua bintang di sebelah kiri "ini" ?

   Kabar baiknya adalah jQuery memungkinkan kita memperoleh koleksi elemen baru berdasarkan koleksi yang sudah ada berdasarkan hubungan dasar ini. Dan di sinilah fungsi traversal berperan.

   1. anak-anak

   Fungsi ini mendapatkan turunan langsung dari sekumpulan elemen.

   Ini bisa sangat berguna dalam banyak situasi, lihat gambar di bawah ini:

   1. Pada awalnya, semua bintang dalam wadah dipilih;
   2. Berikan ekspresi pilihan ke kids() untuk mempersempit hasil pilihan ke bintang yang dipilih ;
   3. Jika kids() menerima parameter apa pun, semua turunan langsung akan dikembalikan;
   4. Elemen cucu tidak dikembalikan.
   5. 

   $('.star').klik(fungsi(){

            $(ini).addClass('pada');

   //        Bagaimana cara memilih elemen induk dari objek saat ini ?

   //        Bagaimana cara menempatkan semua bintang di sebelah kiri bintang saat ini ?

   });