jQuery – Adjacent sibling selector example

jQuery adjacent sibling selector (X + Y) is used to select the immediately follow or next elements matched by “Y” that is a sibling of a “X” element.

For example,


<div class="class1"></div>
<p>I'm class1 sibling #1</p>
<p>I'm class1 sibling #2</p>
<p>I'm class1 sibling #3</p>

The <div> and <p> are sibling relationship. The “$(.class1 + p)” statement will select the <p> element with value “I’m class1 sibling #1” only, the rest of the <p> element will be ignore.

jQuery Example

In this example, only the <div> tag with value “I’m form siblings #1 – DIV” will be match, because it’s the immediately follow or next sibling of <form> element.


<html>
<head>
<title>jQuery adjacent sibling selector example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 
 <style type="text/css">
  div { padding:8px 0px 8px 8px; }
 </style>

</head>
 
<script type="text/javascript">
 
$(document).ready(function(){

	$("form + div").css("border", "2px solid red");

});

</script>
<body>

<h1>jQuery adjacent sibling selector example</h1>

<form>
	
	<label>TextBox 1 (Child) : </label><input name="textbox1">
	
	<div class="level1">
		<label>TextBox 2 (GrandChild) : </label><input name="textbox2">
	</div>
	
	<div class="level1">
	   <div class="level2">
	    <label>TextBox 3 (Great GrandChild) : </label><input name="textbox3">
	   </div>
	</div>
	
	<label>TextBox 4 (Child) : </label><input name="textbox4">
	
</form>
	
<div> I'm form siblings #1 - DIV</div>

<p> I'm form siblings #2 - P </p>

<div> I'm form siblings #3 - DIV </div>

<p> I'm form siblings #4 - P </p>

</body>
</html>

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
jQuery Tutorials Recent comment authors
newest oldest most voted
trackback
jQuery Tutorials

[…] Adjacent sibling selector (X + Y) Select the immediately follow or next elements matched by “Y” that is a sibling of a “X” element. […]