Next »
1905/1956
« Previous

General sibling (E ~ F)

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>//  w  ww . j  a  v a2s. com
 <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(){<!--from  ww w  . j  av a2  s. co  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>

Click to view the demo

The code above generates the following result.

General sibling (E ~ F)
Next »
« Previous