Cara menggunakan what are javascript siblings?

Scriptnya adalah seperti ini ...

	
		
				
	
	
	
		

			
Home
			
Service
			
Contact
			
Blog
			
Product
		
	 
		
			$[document].ready[function[]{
				$['a'].click[function[e]{
					e.preventDefault[];
					$[this].parent['li'].css['border','3px dashed blue'];
				}];		
			}];		
		
	

$[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

	
		
				
	
	
	
		

			
Home
			
Service
			
Contact
			
Blog
			
Product
		
	 
		
			$[document].ready[function[]{
				$['a'].click[function[e]{
					e.preventDefault[];
					$[this].parents['ul'].css['background','yellow'];
				}];		
			}];		
		
	

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 ...

	
		
				
	
	
	
		

			
Home
			
Service
			
Contact
			
Blog
			
Product
		
	 
		
			$[document].ready[function[]{
				$['a'].click[function[e]{
					e.preventDefault[];
					$[this].parent['li'].siblings[].css['border','2px solid blue'];
				}];		
			}];		
		
	

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

		
			.normal{
				border: none;
			}
			
			.borderblue{
				border:2px solid blue;
			}
		

Kemudian javascriptnya seperti ini

	
		
				
		
			.normal{
				border: none;
			}
			
			.borderblue{
				border:2px solid blue;
			}
		
	
	
	
		

			
Home
			
Service
			
Contact
			
Blog
			
Product
		
	 
		
			$[document].ready[function[]{
				$['a'].click[function[e]{
					e.preventDefault[];
					$[this].parent['li'].addClass['borderblue'];
				}];		
			}];		
		
	

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

	
		
				
		
			.normal{
				border: none;
			}
			
			.borderblue{
				border:2px solid blue;
			}
		
	
	
	
		

			
Home
			
Service
			
Contact
			
Blog
			
Product
		
	 
		
			$[document].ready[function[]{
				$['a'].click[function[e]{
					e.preventDefault[];
					$[this].parent['li'].addClass['borderblue'].siblings[].removeClass['borderblue'];
				}];		
			}];		
		
	

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

Terima kasih.

Loka Dwiartara
Ilmuwebsite.com