Next Siblings Selector (“prev ~ siblings”)

Categories: Selectors > Hierarchy

next siblings selector

version added: 1.0jQuery('prev ~ siblings')

prev

Any valid selector.

siblings

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

Description: Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" 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.

Example:

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.

<!DOCTYPE html>
<html>
<head>
  <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>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</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>
<script>$("#prev ~ div").css("border", "3px groove blue");</script>

</body>
</html>

Demo:

Support and Contributions

Need help with Next Siblings Selector (“prev ~ siblings”) or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to Next Siblings Selector (“prev ~ siblings”)? Report it to the jQuery core team.

Found a problem with this documentation? Report it on the GitHub issue tracker

http://validformbuilder.org Robin

I was looking for an alternative for the prototype library function .nextSiblings() .
The only thing I came up with is this:

$(“#element_id ~ ” + jQuery(“#element_id”).get(0).localName);

Instead of the prototype method:

$(“element_id”).nextSiblings();

So is there by any chance a better solution for porting this function to jQuery? I’m removing prototype from an old project to replace it by jQuery but sometimes it’s just really harsh.

http://www.learningjquery.com/ Karl Swedberg

.nextAll()?

http://twitter.com/mahemoff Michael Mahemoff

The documentation should probably mention that if the “prev” element doesn't match anything, the result will be empty. (I was wishfully thinking it might return all matching siblings, as if “prev” was a hypothetical “-1″th element. Would be useful in some situations but not others.)

ajpiano

Not sure I agree that needs to be noted here specifically. A selector that matches nothing, as well any traversal that matches nothing, returns an empty set, which you can test for .length of.

There's always .prevAll()

ajpiano

Not sure I agree that needs to be noted here specifically. A selector that matches nothing, as well any traversal that matches nothing, returns an empty set, which you can test for .length of.

There's always .prevAll()

jQuery API

Next Siblings Selector (“prev ~ siblings”)