JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE

jQuery Traversing Siblings

In this tutorial you'll learn how to traverse sideways in a DOM tree using jQuery.

Traversing Sideways in DOM Tree

In logical relationships siblings are those elements that share the same parent.

jQuery provides several methods such as siblings(), next(), nextAll(), nextUntil(), prev(), prevAll() and prevUntil() that you can use to traverse sideways in the DOM tree.

jQuery siblings() Method

The jQuery siblings() method is used to get the sibling elements of the selected element.

The following example will highlight the siblings of the <p> element which are <h1> and <ul> by adding the class .highlight on document ready.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery siblings() Demo</title>
  • <style type="text/css">
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("p").siblings().addClass("highlight");
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="container">
  •         <h1>Hello World</h1>
  •         <p>This is a <em>simple paragraph</em>.</p>
  •         <ul>
  •             <li>Item One</li>
  •             <li>Item Two</li>
  •         </ul>
  •     </div>
  • </body>
  • </html>

You can optionally include one or more selector as a parameter within the siblings() method to filter your search for the siblings. The following example will only apply the border around the siblings of the <p> that are <ul> elements.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery siblings() Demo</title>
  • <style type="text/css">
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("p").siblings("ul").addClass("highlight");
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="container">
  •         <h1>Hello World</h1>
  •         <p>This is a <em>simple paragraph</em>.</p>
  •         <ul>
  •             <li>Item One</li>
  •             <li>Item Two</li>
  •         </ul>
  •     </div>
  • </body>
  • </html>

jQuery next() Method

The jQuery next() method is used to get the immediately following sibling i.e. the next sibling element of the selected element. The following example will highlight the next sibling of the <p> element which is the <ul> element.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery next() Demo</title>
  • <style type="text/css">
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("p").next().addClass("highlight");
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="container">
  •         <h1>Hello World</h1>
  •         <p>This is a <em>simple paragraph</em>.</p>
  •         <ul>
  •             <li>Item One</li>
  •             <li>Item Two</li>
  •         </ul>
  •     </div>
  • </body>
  • </html>

jQuery nextAll() Method

The jQuery nextAll() method is used to get all following siblings of the selected element.

The following example will highlight all the siblings of the <p> element that comes next to it.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery nextAll() Demo</title>
  • <style type="text/css">
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("p").nextAll().addClass("highlight");
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="container">
  •         <h1>Hello World</h1>
  •         <p>This is a <em>simple paragraph</em>.</p>
  •         <p>This is another paragraph.</p>
  •         <ul>
  •             <li>Item One</li>
  •             <li>Item Two</li>
  •         </ul>
  •     </div>
  • </body>
  • </html>

jQuery nextUntil() Method

The jQuery nextUntil() method is used to get all the following siblings up to but not including the element matched by the selector. In simple words we can say it returns all the next siblings elements between two given elements in a DOM hierarchy.

The following example will highlight all the following sibling elements of the <h1> element excluding the <ul> element i.e. highlight both the <p> element.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery nextUntil() Demo</title>
  • <style type="text/css">
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("h1").nextUntil("ul").addClass("highlight");
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="container">
  •         <h1>Hello World</h1>
  •         <p>This is a <em>simple paragraph</em>.</p>
  •         <p>This is another paragraph.</p>
  •         <ul>
  •             <li>Item One</li>
  •             <li>Item Two</li>
  •         </ul>
  •     </div>
  • </body>
  • </html>

jQuery prev() Method

The jQuery prev() method is used to get the immediately preceding sibling i.e. the previous sibling element of the selected element. The following example will highlight the previous sibling of the <ul> element which is the <p> element.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery prev() Demo</title>
  • <style type="text/css">
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("ul").prev().addClass("highlight");
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="container">
  •         <h1>Hello World</h1>
  •         <p>This is a <em>simple paragraph</em>.</p>
  •         <p>This is another paragraph.</p>
  •         <ul>
  •             <li>Item One</li>
  •             <li>Item Two</li>
  •         </ul>
  •     </div>
  • </body>
  • </html>

jQuery prevAll() Method

The jQuery prevAll() method is used to get all preceding siblings of the selected element.

The following example will highlight all siblings of the <ul> element that comes prior to this.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery prevAll() Demo</title>
  • <style type="text/css">
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("ul").prevAll().addClass("highlight");
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="container">
  •         <h1>Hello World</h1>
  •         <p>This is a <em>simple paragraph</em>.</p>
  •         <p>This is another paragraph.</p>
  •         <ul>
  •             <li>Item One</li>
  •             <li>Item Two</li>
  •         </ul>
  •     </div>
  • </body>
  • </html>

jQuery prevUntil() Method

The jQuery prevUntil() method is used to get all the preceding siblings up to but not including the element matched by the selector. In simple words we can say it returns all the previous siblings elements between two given elements in a DOM hierarchy.

The following example will highlight all the previous sibling elements of the <ul> element excluding the <h1> element i.e. highlight both the <p> element.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery prevUntil() Demo</title>
  • <style type="text/css">
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("ul").prevUntil("h1").addClass("highlight");
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="container">
  •         <h1>Hello World</h1>
  •         <p>This is a <em>simple paragraph</em>.</p>
  •         <p>This is another paragraph.</p>
  •         <ul>
  •             <li>Item One</li>
  •             <li>Item Two</li>
  •         </ul>
  •     </div>
  • </body>
  • </html>

Your Feedback:

We would love to hear from you, please drop us a line.