jQuery Traversing - Siblings


You may locate siblings of an element by traversing sideways in the DOM tree with jQuery.

The parent is shared by siblings.

You can also search for these topics, next sibling using jquery traversing, jquery how to traverse previous siblings, siblings ancestors, html and xml method in jquery traverse siblings, list the jquery traverse siblings, jquery traversing siblings child, example for traversing siblings table, how to find immediate sibling in jquery.

Traversing Sideways in The DOM Tree

In the DOM tree there are several helpful jQuery techniques to traversing sideways :

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()
You can also search for these topics, html method to jquery traversing sideways in the dom tree, example for jquery traversing sideways in the dom tree, types of Traversing Sideways in The DOM Tree.

jQuery siblings() Method

The method siblings() retrieves all sibling items of the element chosen.

Example :- The example below retrieves all h4 sibling elements.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b1").click(function () {
            $("h4.sibling").siblings().css({ "border": "2px solid blue" });
        });

        $("#b2").click(function () {
            $("h4.sibling").siblings().css({ "border": "2px solid red" });
        });
    });
</script>
</head>
<body>

<div>div (parent)<br /><br />
  <p>p1 (child 1)</p>  
  <h4 class="sibling">h4 (child 2)</h4>
  <h5>h5 (child 3)</h5>
  <p>p2 (child 4)</p>
  <div>div (child 5)</div><br />
</div>

<button id="b1">Show All Siblings Of H4</button><br /><br />
<button id="b2">Show Only P Tags Siblings Of H4</button>

</body>
</html>

Output :-

div (parent)

p1 (child 1)

h4 (child 2)

h5 (child 3)

p2 (child 4)

div (child 5)




An optional argument can also be used to filter sibling search.

You can also search for these topics, div sibling selector in jquery, append the jquery siblings method, different element siblings method, data attribute, ways to find siblings, how to perform multiple events, siblings method between two elements, post element, parent and child, example.

jQuery next() and prev() Methods

The next() method is used to select direct next sibling element of choosen element.

The prev() method is used to select direct previous sibling element of choosen element.

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b5").click(function () {
            $("h4.nextprev").next().css({ "border": "2px solid blue" });
        });

        $("#b6").click(function () {
            $("h4.nextprev").next().css({ "border": "2px solid red" });
        });
    });
</script>
</head>
<body>

<div>div (parent)<br /><br />
  <p>p1 (child 1)</p>  
  <h4 class="nextprev">h4 (child 2)</h4>
  <h5>h5 (child 3)</h5>
  <p>p2 (child 4)</p>
  <div>div (child 5)</div><br />
</div>

<button id="b5">Show NEXT Sibling Of H4</button><br /><br />
<button id="b6">Show PREVIOUS Sibling Of H4</button>

</body>
</html>

Output :-

div (parent)

p1 (child 1)

h4 (child 2)

h5 (child 3)

p2 (child 4)

div (child 5)




You can also search for these topics, jquery next and previous sibling method example, jquery next or prev method after element, jquery next or previous method sibling, next sibling with or without class, jquery next method previous div example.

jQuery nextAll() and prevAll() Methods

The following nextAll() function retrieves all the next sibling elements of the chosen item.

The following prevAll() function selects all the previous sibling elements of the chosen item.

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b9").click(function () {
            $("h4.npall").nextAll().css({ "border": "2px solid blue" });
        });

        $("#b10").click(function () {
            $("h4.npall").prevAll().css({ "border": "2px solid red" });
        });
    });
</script>
</head>
<body>

<div>div (parent)<br /><br />
  <p>p1 (child 1)</p>  
  <h4 class="npall">h4 (child 2)</h4>
  <h5>h5 (child 3)</h5>
  <p>p2 (child 4)</p>
  <div>div (child 5)</div><br />
</div>

<button id="b9">Show NEXT ALL Siblings Of H4</button><br /><br />
<button id="b10">Show PREVIOUS ALL Siblings Of H4</button>

</body>
</html>

Output :-

div (parent)

p1 (child 1)

h4 (child 2)

h5 (child 3)

p2 (child 4)

div (child 5)




You can also search for these topics, append the jquery nextall method, declare the selector in jquery nextall method, jquery nextall and prevall method data, jquery first and last nextall method, ways to find jquery nextall and prevall method, filtering the method of jquery nextall, jquery multiselect, manipulate the button with nextall and prevall method, execute nextall method before page load in jquery, differenciate the jquery nextall method vs siblings, example.

jQuery nextUntil() and prevUntil() Methods

The function nextUntil() returns all the (next) sibling components between two elements.

The function prevUntil() returns all the (previous) sibling components between two elements.

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b13").click(function () {
            $("h4.npuntil").nextUntil().css({ "border": "2px solid blue" });
        });

        $("#b14").click(function () {
            $("h4.npuntil").prevUntil().css({ "border": "2px solid red" });
        });
    });
</script>
</head>
<body>

<div>div (parent)<br /><br />
  <p>p1 (child 1)</p> 
  <div>div (child 2)</div> <br />
  <h4 class="npuntil">h4 (child 3)</h4>
  <h5>h5 (child 4)</h5>
  <div>div (child 5)</div><br />
  <p>p2 (child 6)</p>
  <div>div (child 7)</div><br />
</div>

<button id="b13">Show NEXT ALL Siblings Of H4 (Until P Tag)</button><br /><br />
<button id="b14">Show PREVIOUS ALL Siblings Of H4 (Until P Tag)</button>

</body>
</html>

Output :-

div (parent)

p1 (child 1)

div (child 2)

h4 (child 3)

h5 (child 4)
div (child 5)

p2 (child 6)

div (child 7)




You can also search for these topics, include the selector in jquery nextuntil, execute the last element nextuntil method, use of multiple selectors in jquery nextuntil or prevuntil method, working of jquery prevuntil and nextuntil method, example for jquery nextuntil and prevuntill method, return value of nextuntil() or prevuntil() method using jquery.