Add class to next sibling javascript

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

element which are

and

by adding the class .highlight on document ready.

    

        
Hello World
        
This is a simple paragraph.
        

            
Item One
            
Item Two
        
    

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

that are

elements.

    

        
Hello World
        
This is a simple paragraph.
        

            
Item One
            
Item Two
        
    

---

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

element which is the

element.

    

        
Hello World
        
This is a simple paragraph.
        

            
Item One
            
Item Two
        
    

---

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

element that comes next to it.

    

        
Hello World
        
This is a simple paragraph.
        
This is another paragraph.
        

            
Item One
            
Item Two
        
    

---

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

element excluding the

element i.e. highlight both the

element.

    

        
Hello World
        
This is a simple paragraph.
        
This is another paragraph.
        

            
Item One
            
Item Two
        
    

---

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

element which is the

element.

    

        
Hello World
        
This is a simple paragraph.
        
This is another paragraph.
        

            
Item One
            
Item Two
        
    

---

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

element that comes prior to this.

    

        
Hello World
        
This is a simple paragraph.
        
This is another paragraph.
        

            
Item One
            
Item Two
        
    

---

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

element excluding the

element i.e. highlight both the

element.

    

        
Hello World
        
This is a simple paragraph.
        
This is another paragraph.
        

            
Item One
            
Item Two