WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

jQuery Siblings

Previous Next

The .siblings() method returns all siblings of the selected element.

The elements that have the same parent but are not the selected element itself.


Traversing Sideways in The DOM Tree

In jQuery, sideways traversal involves moving between elements that share the same parent (i.e., siblings).

Method

Description

.siblings()

All siblings of the selected element

.next()

Next sibling (immediately after)

.nextAll()

All next siblings (after the element)

.nextUntil()

All next siblings up to (but not including) a specific element

.prevAll()

All previous siblings (before the element)

.prevUntil()

All previous siblings up to a specific element

jQuery siblings() Method


The .siblings() method selects all sibling elements of the selected element.

The following example returns all sibling elements of <h2>:

Example
<script>
$(document).ready(function(){
$("h2").siblings().css({"color": "red", "border": "2px solid red"});
});
</script>
Try it yourself

In jQuery, the .siblings() method accepts an optional parameter that allows you to filter which siblings you want to select.


The following example returns all sibling elements of <h2> that are <p> elements:

Example
<script>
$(document).ready(function(){
$("h2").siblings("p").css({"color": "red", "border": "2px solid red"});
});
</script>
Try it yourself

jQuery next() Method


The .next() method selects the immediate next sibling of the selected element.

The element that comes right after it, sharing the same parent.


The following example returns the next sibling of <h2>:

Example
<script>
$(document).ready(function(){
$("h2").next().css({"color": "red", "border": "2px solid red"});
});
</script>
Try it yourself

jQuery nextAll() Method


The .nextAll() method selects all next siblings (i.e., elements that share the same parent and come after the selected element in the DOM).


The following example returns all next sibling elements of <h2>:

Example
<script>
$(document).ready(function(){
$("h2").nextAll().css({"color": "red", "border": "2px solid red"});
});
</script>
Try it yourself

jQuery nextUntil() Method


The .nextUntil() method selects all next siblings up to (but not including) the element that matches a given selector. 

It allows you to traverse a sequence of elements between a starting point and an end condition.


The following example returns all sibling elements between a <h2> and a <h6> element:

Example
<script>
$(document).ready(function(){
$("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});
});
</script>
Try it yourself

jQuery prev(), prevAll() & prevUntil() Methods


The prev(), prevAll(), and prevUntil() methods work similarly to their "next" counterparts (like .next(), .nextAll(), and .nextUntil()).

The only difference being that they allow you to traverse backward in the DOM.

These methods help you select previous sibling elements in the DOM tree.


Previous Next