prev ~ siblings

next siblings selector

Description: Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector.

jQuery('prev ~ siblings')

version added: 1.0

Element

Any valid selector.

siblings

Element

A selector to filter elements that are the following siblings of the first selector.

The notable difference between (prev + next) and (prev ~ siblings) is their respective reach. While the former reaches only to the immediately following sibling element, the latter extends that reach to all following sibling elements.

Examples

Finds all divs that are siblings after the element with #prev as its id. Notice the span isn't selected since it is not a div and the "niece" isn't selected since it is a child of a sibling, not an actual sibling.

$("#prev ~ div").css("border", "3px groove blue");

The output of the code above will be:

Try it yourself

Full source:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("#prev ~ div").css("border", "3px groove blue");
  });
  </script>
  <style>
  div,span {display:block;width:80px;height:80px;margin:5px;background:#bbffaa;float:left;    font-size:14px;}
  div#small {width:60px;height:25px;font-size:12px;background:#fab;}
  </style>
</head>
<body>
  <div>div (doesn't match since before #prev)</div>
  <span id="prev">span#prev</span>
  <div>div sibling</div>
  <div>div sibling <div id="small">div niece</div></div>
  <span>span sibling (not div)</span>
  <div>div sibling</div>
</body>
</html>

Try it yourself

Was this information helpful?

Yes No

prev ~ siblings

next siblings selector

jQuery('prev ~ siblings')

Examples

Comments