Digitalmapia adalah situs dimana semua orang bisa menulis artikelnya sendiri. Klik "Login/Register untuk masuk, lalu klik "Tulis Artikel" untuk mulai menulis.

Seri belajar JQuery(3): Mengenal children, parent, ancestor dan descendant

Tulisan ini adalah tutorial berseri tentang JQuery, apa yang ditulis disini merupakan kelanjutan dari tulisan sebelumnya, berikut ini adalah daftar lengkap seri belajar JQuery pada blog ini:

Seperti yang sudah saya sampaikan pada bagian sebelumnya, kali ini kita akan lebih dalam membahas tentang manipulasi DOM terutama yang berhubungan dengan children, parent, ancestor dan descendant.

Children

Children adalah sebuah element yang berada di dalam element lainnya secara langsung. Perhatikan contoh berikut:

<ul>
	<li>
		<a href="#">Hello</a>
	</li>
</ul>

Pada contoh diatas, element li merupakan children dari ul sedangkan, element a bukan merupakan children dari ul karena tidak ‘secara langsung’ berada di dalam ul tetapi dengan perantara li.

Namun, perlu diperhatikan pula bahwa element a berada di dalam element li secara langsung sehingga a merupakan children dari li.

Dari contoh diatas kita bisa mengambil kesimpulan sebagai berikut:

  • li merupakan children dari ul
  • a bukan merupakan children dari ul
  • a merupakan children dari element li

Melakukan seleksi children dengan JQuery

Sekarang, misal kita akan membuat text ‘Hello’ yang berada di dalam element a menjadi berwarna merah. Maka, ada beberapa cara untuk melakukannya, berikut salah satunya:

$(document).ready(function(){
	$('ul li').children('a').css('color', 'red');
})

Pada contoh diatas kita menggunakan fungsi children. Kode $('ul li').children('a') jika diterjemahkan ke dalam bahasa manusia artinya ‘ambil children dari element li dimana element li tersebut berada didalam ul dan children tersebut berupa tag a’.

Contoh lain yang lebih sederhana adalah sebagai berikut:

$(document).ready(function(){
	$('li').children('a').css('color', 'red');
})

Kode $('li').children('a') artinya, ‘ambil tag a yang merupakan children dari element li‘.

Parent

Jika diterjemahkan ke dalam bahasa indonesia, children artinya anak kan? sedangkan parent berarti orang tua. Dengan demikian, Parent merupakan kebalikan dari children. Perhatikan contoh berikut:

<ul class="list1">
	<li>
		Hello
	</li>
</ul>

<ul class="list2">
	<li>Apa</li>
	<li>Kabar</li>
	<li>Dunia</li>
</ul>

Pada contoh diatas, ul dengan class list2 merupakan parent dari list item (li) yang didalam-nya terdapat text ‘Apa’, ‘Kabar’ dan ‘Dunia’. Namun ‘list2′ bukan merupakan parent dari list item yang didalamnya terdapat text ‘Hello’.

Perhatikan pula contoh berikut:

<ul>
	<li>
		<a href="#">Hello</a>
	</li>
</ul>

Pada contoh diatas ul merupakan parent dari li namun ‘bukan’ merupakan parent dari a.

Melakukan seleksi parent dengan JQuery

Setelah anda memahami tentang parent, kita akan membahas cara melakukan seleksi parent. Misalnya, kita memiliki unordered list sebagai berikut:

	<ul>
		<li class="hello">Hello</li>
		<li>Apa</li>
		<li>Kabar</li>
		<li>Dunia</li>
	</ul>

	<ul>
		<li>Apa Kabar</li>
	</ul>

Pada contoh diatas, kita memiliki dua unordered list (ul) dan yang akan kita lakukan adalah membuat semua text yang ada di dalam unordered list ‘yang pertama’ menjadi berwarna merah. Sedangkan, unordered list yang kedua tetap berwarna hitam. Untuk itu, anda bisa menggunakan JQuery dengan cara seperti berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
</head>
<body>
	<ul>
		<li class="hello">Hello</li>
		<li>Apa</li>
		<li>Kabar</li>
		<li>Dunia</li>
	</ul>

	<ul>
		<li>Apa Kabar</li>
	</ul>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
	
		$(document).ready(function(){
			$('li.hello').parent('li').css('color', 'red');
		})
	
</body>
</html>

Ancestor

Ancestor hampir sama dengan parent. Hanya saja, kalau parent harus secara langsung berada diatas/melingkupi sebuah element. Sedangkan, ancestor bisa saja tidak secara langsung. Ancestor bisa dikatakan sebagai ‘kakek/nenek’ atau ‘nenek moyang’ dari sebuah element. Perhatikan contoh berikut:

<ul class="list">
	<li>Apa</li>
	<li>Kabar</li>
	<li>
		<ul>
			<li class="item">
				<a href="#">Hello</a>
			</li>
		</ul>
	</li>
</ul>

Pada contoh diatas element ul yang memiliki class list merupakan ancestor dari element a. Demikian, juga element li yang merupakan children dari ul dengan class list. Berikut detail lengkap ‘hubungan kekeluargaan’ (:D) dari kode diatas:

  • Semua element ul merupakan ancestor dari element a
  • Semua element li yang tidak memiliki class “item” merupakan ancestor dari element a
  • Element ul yang memiliki class “list” merupakan ancestor dari element li yang memiliki class “item”

Dengan demikian, bisa disimpulkan bahwa semua element yang melingkupi element a merupakan ancestor dari element a tersebut.

Contoh penggunaan ancestor dalam JQuery adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar JQuery</title>
</head>
<body>
	<ul class="list">
		<li>Apa</li>
		<li>Kabar</li>
		<li>
			<ul>
				<li class="item">
					<a href="#">Hello</a>
				</li>
			</ul>
		</li>
	</ul>

	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
	
		$(document).ready(function(){
			$('a').ancestor('ul').css('color', 'red');
		})
	
</body>
</html>

Descendant

Jika ancestor dikatakan sebagai ‘nenek moyang’ dari sebuah element. Maka descendent merupakan ‘cicit/keturunan’ dari sebuah element. Jadi, pada contoh diatas, element a merupakan descendant dari semua element ul dan element li yang tidak memiliki class “item”. Element a juga merupakan children dari element li yang memiliki class “item”.

Contoh penggunaan descendant pada JQuery adalah sebagai berikut:

$(document).ready(function(){
	$('ul.list').descendant('a').css('color', 'red');
})

Penutup

Setelah membaca bagian ini, diharapkan anda sudah paham mengenai apa itu children, parent, ancestor dan descendant pada manipulasi DOM dan bagaimana memanipulasinya dengan menggunakan JQuery. Jangan lupa membaca bagian selanjutnya dari seri tutorial JQuery ini yang tentunya tidak kalah penting dalam mempelajari JQuery. Tahap selanjutnya, kita akan belajar mengenai event. Semoga bermanfaat.

Belajar JQuery