jQuery sibling selector
Description and Syntax
$('E ~ F')
selects all elements matched by F
that follow and have the same parent as an element matched by E.
Examples
$('ul ~ p')selects all<p>elements that follow a sibling<ul>element.$('#myid ~ .myclass')selects all elements withclass="myclass"that follow a sibling element withid="myid".
For the following HTML code:
<ul>/* ww w. j a v a2 s . c o m*/
<li class="first"></li>
<li class="second"></li>
<li class="third></li>
</ul>
<ul>
<li class="fourth"></li>
<li class="fifth"></li>
<li class="sixth"></li>
</ul>
$('li.first ~ li')selects<li class="second">and<li class="third">$('li.first + li')selects<li class="second">.
The following code selects input sibling.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . j a v a 2 s . c o m-->
$("label ~ input").css("color", "red").val("value")
});
</script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Address:</label>
<p>p</p>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
</body>
</html>