Bagaimana cara menemukan anak dari elemen HTML di jQuery

Elemen HTML mencakup bagian apa pun dari laman web, seperti header, tabel, gambar, dan paragraf. Ketika Anda menjalin variabel HTML satu di dalam yang lain, Anda membuat elemen induk dan anak. Elemen atas adalah ayah, sementara semua elemen yang disisipkan menjadi anak-anak. Di jQuery, Anda bisa mendapatkan anak dari elemen menggunakan fungsi "children ()" (anak, dalam bahasa Inggris), tetapi Anda harus melalui larik nilai yang berfungsi menciptakan.

Periksa apakah kode Anda menyertakan referensi ke pustaka jQuery sebelum mencoba menjalankan skrip di jQuery. Tambahkan kode ini dalam variabel "" (header) dari halaman web Anda, jika Anda tidak melihat referensi:

Tambahkan beberapa variabel skrip di bawah referensi pustaka jQuery dan tulis suatu fungsi untuk memeriksa bahwa halaman telah selesai memuat. Semua skrip Anda harus berada di antara tombol-tombol fungsi ini:

$ (function () {});

Pilih elemen HTML yang Anda butuhkan untuk mendapatkan daftar elemen anak dari itu. Misalnya, jika Anda ingin mendapatkan anak-anak dari daftar yang tidak diurutkan, pilih elemen "ul". Tambahkan pemilih dengan fungsi "children ()" untuk mendapatkan anak:

$ ('ul.level-2'). children ();

Contoh sebelumnya akan memilih daftar tidak berurut yang memiliki nama kelas "level-2". Namun, ketika "anak-anak ()" menemukan beberapa elemen anak, itu akan membuat berbagai nilai. Anda akan membutuhkan kode khusus untuk memproses matriks.

Tambahkan "children ()" dengan "each ()" (masing-masing) untuk melintasi array elemen anak. Karena ini adalah struktur loop, Anda memerlukan variabel counter, tetapi Anda tidak harus membuatnya terlebih dahulu di jQuery. Berikan "i" sebagai argumen di setiap "each ()" untuk mendapatkan counter Anda:

$ ('ul.level-2'). children (). masing-masing (function (i) {});

Deklarasikan variabel yang akan mempertahankan nilai teks setiap elemen anak. Anda bisa mendapatkan nilai-nilai elemen lain, tetapi teks akan mengembalikan teks apa pun yang ditemukan di dalam anak dan berguna untuk mendapatkan data. Setel variabel menjadi "$ (this)" (ini) untuk mendapatkan elemen saat ini bahwa fungsi "each ()" berfungsi. Tambahkan "$ (this)" dengan "text ()" (teks) untuk mendapatkan teks:

var childEl = $ (this) .text ();

Berikan nilai pada halaman Anda dengan memilih elemen dan tambahkan "append ()" (lampiran) sehingga fungsi "each ()" dapat terus menambahkan nilai-nilai yang ditemukannya:

$ ('div'). append (i + ":" + childEl + "");

Dalam contoh ini, "childEl" dikeluarkan untuk serangkaian variabel "". Setiap kali jQuery mengulangi kode dalam "each ()", ia mengeluarkan nomor dari "i", menambahkan sepasang titik koma, menampilkan nilai "childEl" dan mengakhiri baris dengan variabel skrip.

Skrip terakhir Anda akan terlihat seperti ini:

$ (function () {$ ('ul.level-2'). children (). masing-masing (function (i) {var childEl = $ (this) .html (); $ ('div'). append (i + ":" + childEl + "");});));

Dewan

Tambahkan "console.log (childEl);" di dalam setiap fungsi "masing-masing ()" di baris terakhir. Gunakan Firebug di Firefox atau Konsol JavaScript di Google Chrome untuk memeriksa nilai di konsol saat melakukan debug.

Ganti "text ()" dengan "html ()" untuk mendapatkan kode HTML dari elemen anak.