General sibling (E ~ F)

Syntax

$('E ~ F')

Description

Select all elements matched by F that follow and have the same parent as an element matched by E.

Examples

Selector	Selects
$('ul ~ p')	all <p> elements that follow a sibling <ul> element
$('#myid ~ .myclass')	all elements with class="myclass" that follow a sibling element with id="myid"

Consider the following HTML code:

 
<ul>
 <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">

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
     $("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>

Click to view the demo

Home
JavaScript Book
jQuery

Selector: