Cara menggunakan SLIBINGS pada JavaScript

Pembahasan mengenai pemrograman dengan Javascript selanjutnya saat ini sampai kepada children, sibling dan parent pada Javasript. Kita akan membuat source code HTML dan kemudian source code Javascriptnya.

Table of Contents Show

Otomatisasi Pembuatan dan Upload Konten Blog, Sudah digunakan lebih dari 110 Blogger Expert!

Untuk source code HTML adalah seperti berikut ini:

<ul id=”mama”> Mama
<li id=”sulung”>Sulung</li>
<li id=”kakak”>Kakak</li>
<li id=”tengah”>Tengah</li>
<li id=”adik”>Adik</li>
<li id=”bungsu”>Bungsu</li>
</ul>

Sedangkan source code untuk Javascriptnya adalah seperti berikut ini

	let mama = document.querySelector("ul#mama");
	console.log("children:",mama.children);
	
	let sulung = mama.firstElementChild;
	console.log("sulung:",sulung);

	let bungsu = mama.lastElementChild;
	console.log("bungsu:",bungsu);
	
	let tengah = mama.children[2];
	console.log("tengah:",tengah);
	
	let adik = tengah.nextElementSibling;
	console.log("adik:",adik);

	let kakak = tengah.previousElementSibling;
	console.log("kakak:",kakak);
	
	console.log("parent:",kakak.parentElement);

Hasilnya dapat dilihat di https://js.aris.proweb.asia/3-5-1-children-sibling-parent.html dengan tampilan sepeti berikut ini:

Informasi lebih lanjut silahkan mengunjungi:
1. https://www.w3schools.com/jsref/dom_obj_all.asp .
2. https://www.w3schools.com/jsref/prop_element_firstelementchild.asp .
3. https://www.w3schools.com/jsref/prop_element_lastelementchild.asp .
4. https://www.w3schools.com/jsref/prop_element_children.asp .
5. https://www.w3schools.com/jsref/prop_element_nextelementsibling.asp .
6. https://www.w3schools.com/jsref/prop_element_previouselementsibling.asp .
7. https://www.w3schools.com/jsref/prop_node_parentelement.asp .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

saya mempunyai kode sbb

<div class="menu">
            <ul class="menu-list">
                <li class="menu-listed">
                    <a href="#home" class="link">User Management</a>
                    <ul class="menu-trees">
                        <li><a href="#home">#home</a></li>
                    </ul>
                </li>
            </u

.menu-trees{
display:none;
}
.tree{
display:block;
}

const list = document.querySelectorAll('.menu-listed')

const tree = document.querySelectorAll('.list')



list.forEach(function(el){
        el.addEventListener('click',function (event) {
                event.target.nextElementSibling.classList.toggle('tree')
        })
});

bagaimana cara menambahkan transisi / animasi nya ?

@xyaep025

13 Kontribusi 1 Poin

Dipost: 3 tahun yang lalu Update 2 tahun yang lalu

Jawaban

Belum ada Jawaban, jadi yang pertama

Artikel kali ini ditulis dengan tujuan agar bisa menjawab pertanyaan sahabat sekalian yang saat ini sedang belajar JQuery namun kemungkinan besar belum paham mengenai konsep dari Children Parent dan Siblings pada JQuery. Meski sebetulnya jika sudah memahami konsep children parent dan siblings pada css tidak akan ada problem. Namun demi kebaikan bersama saya akan bahas secara tuntas permasalahan children, parent, dan siblings pada belajar jquery kali ini. Diharapkan mudah-mudahan menjadi solusi ketika dalam pembelajaran Anda.

Untuk menunjang pembelajaran saya menyediakan script html sederhana seperti ini, yang mana didalamnya sudah saya sisipkan pemanggilan script jquerynya. Sehingga nanti bisa langsung praktik saja ...

Otomatisasi Pembuatan dan Upload Konten Blog, Sudah digunakan lebih dari 110 Blogger Expert!

Cocok untuk Anda yang tidak ingin direpotkan oleh pekerjaan harian seperti membuat konten dan posting harian, biarkan autoblog yang bekerja untuk Anda, semua serba otomatis. Cocok untuk SEO. Tak ada yang se-MUDAH, se-FLEKSIBEL & se-POWERFULL IW-AutoBlog dalam mengotomatisasi pembuatan konten Blog. Lebih lengkap silahkan kunjungi di sini)

Kita bahas script yang pertama terlebih dahulu

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>		
	</head>
	<body>
	
		<ul id="top-menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Service</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Product</a></li>
		</ul>
	 
		<script type="text/javascript">
			$(document).ready(function(){
				$('a').click(function(e){
					e.preventDefault();
					$(this).css('color','yellow');
				});		
			});		
		</script>
	</body>
</html>

Saya sudah menyediakan menu, dengan 5 buah link di dalamnya. Dibuat menggunakan unordered list. Saya berikan sebuah event click, ketika di klik maka link akan berubah menjadi warna kuning. Perlu diketahui bahwa e.preventDefault() ada sebuah function yang mencegah fungsi default yakni menuju ke suatu link ketika anchor / a di klik. e.preventDefault() mencegah sifat default dari link. Yakni menuju ke suatu link yang terisi di dalam href.

Kita akan lebih menukik lagi pembahasannya

Parent

Parent, sesuai dengan artinya adalah orang tua. Sehingga apabila melihat script html di atas, yang menjadi parent dari <a href="#">Service</a> adalah <li></li> yang mewadahinya. Dan yang menjadi parent dari <li></li> adalah <ul id="top-menu"></ul>

Lalu bagaimana JQuery bisa mengakses orang tuanya, untuk memberikan suatu fungsi. Misal ketika kita mengklik link maka orang tuanya yakni si <li> akan kita berikan border dashed blue

Scriptnya adalah seperti ini ...

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>		
	</head>
	<body>
	
		<ul id="top-menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Service</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Product</a></li>
		</ul>
	 
		<script type="text/javascript">
			$(document).ready(function(){
				$('a').click(function(e){
					e.preventDefault();
					$(this).parent('li').css('border','3px dashed blue');
				});		
			});		
		</script>
	</body>
</html>

$(this)ini mengacu kepada apa yang diklik dalam hal ini adalah linknya $('a').click(function(e){

Selain mengakses orang tua / parent diatasnya, Anda pun bisa mengakses orang tua dari orang tua. Dengan menggunakan parents, ada s di belakangnya. Scriptnya adalah seperti ini

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>		
	</head>
	<body>
	
		<ul id="top-menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Service</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Product</a></li>
		</ul>
	 
		<script type="text/javascript">
			$(document).ready(function(){
				$('a').click(function(e){
					e.preventDefault();
					$(this).parents('ul').css('background','yellow');
				});		
			});		
		</script>
	</body>
</html>

Siblings

Siblings, sesuai juga dengan artinya yakni saudara. JQuery menyediakan fasilitas ini agar seorang web designer bisa memberikan suatu function ataupun value dari elemen saudaranya yang di berikan event. Lebih jelasnya misalnya begini. Apa bila saya mengklik menu yang sudah dibuat sebelumnya, maka siblings-siblings yang lain pun ikut berubah warna bordernya misalnya.
Scriptnya adalah seperti ini ...

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>		
	</head>
	<body>
	
		<ul id="top-menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Service</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Product</a></li>
		</ul>
	 
		<script type="text/javascript">
			$(document).ready(function(){
				$('a').click(function(e){
					e.preventDefault();
					$(this).parent('li').siblings().css('border','2px solid blue');
				});		
			});		
		</script>
	</body>
</html>

Nah misalkan kita ingin apabila di klik menu nya berubah jadi border blue, sedangkan jika di klik menu yang lainnya maka menu yang sebelumnya menjadi normal.

Pertama kita siapkan terlebih dahulu script ketika link di klik akan menghasilkan border blue pada li nya. Sebelumnya disiapkan dulu style css nya seperti ini ...

Letakkan sebelum tag head berakhir

		<style type="text/css">
			.normal{
				border: none;
			}
			
			.borderblue{
				border:2px solid blue;
			}
		</style>

Kemudian javascriptnya seperti ini

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>		
		<style type="text/css">
			.normal{
				border: none;
			}
			
			.borderblue{
				border:2px solid blue;
			}
		</style>
	</head>
	<body>
	
		<ul id="top-menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Service</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Product</a></li>
		</ul>
	 
		<script type="text/javascript">
			$(document).ready(function(){
				$('a').click(function(e){
					e.preventDefault();
					$(this).parent('li').addClass('borderblue');
				});		
			});		
		</script>
	</body>
</html>

Setelah itu ketika link di klik maka siblings yang lainnya akan menjadi normal

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>		
		<style type="text/css">
			.normal{
				border: none;
			}
			
			.borderblue{
				border:2px solid blue;
			}
		</style>
	</head>
	<body>
	
		<ul id="top-menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Service</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Product</a></li>
		</ul>
	 
		<script type="text/javascript">
			$(document).ready(function(){
				$('a').click(function(e){
					e.preventDefault();
					$(this).parent('li').addClass('borderblue').siblings().removeClass('borderblue');
				});		
			});		
		</script>
	</body>
</html>

Ya, kurang lebih seperti itu, untuk children bisa Anda uji coba sendiri. Semoga belajar jquery kali ini bermanfaat.

Terima kasih.

Loka Dwiartara
Ilmuwebsite.com