jQuery Sibling Methods: siblings(), next(), prev() Explained

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

$(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

$(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

$(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

$(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

$(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 ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.