Bagian 7. Menggunakan JQuery Traversing

Traversing digunakan untuk mencari dan mengakses elemen HTML yang masih satu parent (family/keluarga)? Berfungsi untuk memberikan effect, event, ataupun manipulation kepada elemen yang satu (family/keluarga). Misalkan kita akanm memberikansuatu effect kepada hanya anak pertama pada suatu div.

MenggunakanJQuery Parent

Jquery parent di gunakan untuk memberikan penderitaan kepada orang tua langsungnya. Contoh sederhana menggunakan JQuery Parent adalah sebagai berikut :




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function( ){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div>
<span>Test Parent</span>
</div>
</body>
</html>

Contoh yang lebih kompleks adalah seperti dibawah ini




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function( ){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
<style>
.ancestors *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (great-grandparent / buyut -> moyang)
<ul>ul (grandparent / kakek)
 <li>li (direct parent / parent -> orang tua langsung)
<span>span</span>
 </li>
</ul>
 </div>
 <div style="width:500px;">div (grandparent / kakek)
<p>p (direct parent / parent -> orang tua langsung)
<span>span</span>
 </p>
 </div>
</div>
</body>
</html>

Menggunakan JQuery Parents

Jika parent itu hanya berlaku kepada orang tua langsungnya, maka parents itu berlaku kepada orangtua-orangtua di atasnya. Contohnya adalah seperti dibawah ini :




<!DOCTYPE html>
<html>
<head>
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function( ){
$("em").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div>
<div class="article">
<h1>Ini Judul Artikel</h1>
<p>Ini adalah contoh artikel yang bisa digunakan sebagai contoh
dalam belajar JQuery. <em>Contoh EM</em></p>
</div>
</div>
</body>
</html>

Menggunakan JQuery ParentsUntil

Baca Juga

ParentsUntil digunakan untuk memberikan effect kepada orang-orang tua diatasnya sampai batas yang tertulis di bagian parameter dalam parentsUntilnya.

Misalkan seperti ini :

$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

Ini artinya “orang tua dari span sampai bertemu dengan div” akan diberikan effect.

Download source code latihan

Kode lengkapnya adalah seperti ini




<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="ancestors"> body (great-great-grandparent)
 <div style="width:500px;">div (great-grandparent)
 <ul>ul (grandparent)
 <li>li (direct parent)
 <span>span</span>
 </li>
 </ul>
 </div>
</body>
</html>

Menggunakan JQuery Children

JQuery children digunakan semua anak orang tuanya. Misalkan seperti ini

$("div").children().css({"color":"red","border":"2px solid red"});

Ini artinya, berikan css terkait yakni warna text merah, dan border ukuran 2px berwarna merah kepada anak-anak dari div.

Kode lengkapnya adalah seperti di bawah ini :




<!DOCTYPE html>
<html>
<head>
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (current element)
<p>p (child)
<span>span (grandchild)</span>
</p>
<p>p (child)
<span>span (grandchild)</span>
</p>
</div>
</body>
</html>

Menggunakan JQuery Siblings

Jika pada materi-materi sebelumnya kita telah bersinggungan dengan Orang Tua dan Anak, parent dan children, maka kali ini kita akan bersinggungan dengan saudara kandung, yakni siblings( ).

Sebagai contohnya kita akan membuat 4 buah div, yang jika di klik salah satunya maka akan diperlihatkan detil isinya, namun saudara-saudaranya menutup. Begitu juga ketika kita mengklik saudaranya, maka dia akan memperlihatkan detil isi, sedangkan saudara-saudaranya menutup.




<!DOCTYPE html>
<html>
<head>
<style>
div{
float:left;
padding:10px;
width:200px;
height:auto;
margin:0 20px 0 0;
background:#eee;
}
h3{
margin:0;
}
h3:hover{
cursor:pointer;
}
p{
margin:0;
display:none;
}
</style>
<script src="jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$('h3').click(function(){
/* saudara dari h3 diberikan effect slidedown */
$(this).siblings('p').slideDown();
/* orang tua dari h3 yakni div, saudara-saudaranya si
div, anak si div yakni p di berikan effect slideUp */
$(this).parent('div').siblings().children('p').slideUp();
});
});
</script>
</head>
<body>
<div><h3>Satu</h3><p>Satu dikenal dengan suatu yang istimewa, nomor
satu, itu ibaratnya tidak terkalahkan</p></div>
<div><h3>Dua</h3><p>Dua merupakan Angka yang lumrah ditemukan
pada anggota tubuh, dua tangan</p></div>
<div><h3>Tiga</h3><p>Ada sebuah desa bernama salatiga, yang dimana
penduduknya menyenangi akan dunia web development</p></div>
<div><h3>Empat</h3><p>Empat, dan angka lainnya itu sama-sama
bagusnya</p></div>
</body>
</html>

Yang terjadi adalah ketika satu, dua, tiga, empat diklik maka akan muncul detil dari keterangannya, namun saudara-saudara dari orang tua h3, yakni div, yang memiliki anak 'p' itu diberikan effect slideUp. Silahkan dicoba.