Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

JQuery .parent(), .parents() dan .children()

Singkat saja, .parent() digunakan untuk menyeleksi elemen induk terdekat. .parents() digunakan untuk menyeleksi elemen induk pada level tertentu. .children() digunakan untuk menyeleksi anak elemen terdekat.

Kita mulai dengan .parent(). Katakanlah kita mempunyai sebuah elemen daftar seperti ini:

<ul>
    <li>Item daftar</li>
    <li>Item daftar</li>
    <li><a href="#">Daftar dalam tautan</a></li>
    <li>Item daftar</li>
</ul>

Jika kita ingin menyeleksi elemen induk terdekat dari <a> agar dikenai CSS border berupa border:1px dotted black, maka yang perlu Anda lakukan adalah seperti ini:

$('a').parent().css('border', '1px dotted black');

Dengan begitu, elemen <li> yang menjadi induk dari elemen tersebut akan dikenai border dotted berwarna hitam. Namun berbeda dengan .parents(). Saat kita menggunakan .parents(), kita bisa bebas menentukan elemen induk level berapapun:

$('a').parents('ul').css('border', '1px dotted black');

Kode di atas tidak akan menyeleksi elemen <li> yang menjadi induk dari elemen <a> melainkan akan mengenai elemen <ul> yang menjadi elemen induk dari <a> dan juga <li>

Coba Sendiri

.children() tidak akan membuat Anda bingung. Ini hanya akan menyeleksi anak elemen level pertama saja, sedangkan anak elemen sejenis di bawahnya/di dalamnya tidak akan ikut terkena:

$('#outer').children().addClass('children');

Kode di atas akan menambahkan kelas children pada anak level pertama dari elemen #outer, sedangkan elemen-elemen selain anak pertama akan diabaikan:

Firebug
Melihat melalui Firebug

Coba Sendiri

Cara kerja .children() pada dasarnya sama dengan selektor CSS3 ">" yang akan menyeleksi anak elemen terdekat saja:

$('#outer > div').addClass('children');

Anda bisa menggunakan cara di atas atau juga menggunakan cara .children(). Semuanya tergantung keadaan.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 1 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!