General sibling (E ~ F)

In this chapter you will learn:

Description and Syntax for sibling selector
Examples for 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 with class="myclass" that follow a sibling element with id="myid".

For the following HTML code:

<ul>/*  ja  v  a 2 s. c  om*/
 <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><!--from  java2s.  c  o m-->
  <head>
    <script src="http://java2s.com/style/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>