jQuery Traversal - Siblings (siblings)

With jQuery, we can easily traverse horizontally in the DOM tree to find the siblings of an element.

Sibling elements are those that share the same parent element.

In this chapter, we will explain how to perform horizontal traversal in the DOM tree.

Horizontal traversal in the DOM tree

We have the following jQuery methods for horizontal traversal in the DOM tree:

• siblings()

• next()

• nextAll()

• jQuery nextUntil() and prevUntil() Methods

• prev()

• prevAll()

• jQuery

This chapter will show you how to use each method.

jQuery siblings() method

method returns all subsequent siblings between the two given parameters. siblings()The method returns all sibling elements of the selected element.

The following example returns all sibling elements of each <li> element with the class name "middle":

$(document).ready(function(){
　　$("li.middle").siblings().css("background"-color", "lightgreen");
});

You can also use optional parameters to filter the search for siblings.

The following example returns all sibling elements of each list item with the class "bold":

$(document).ready(function(){
　　$("li").siblings(".bold").css("background"-color", "lightgreen");
});

jQuery next() method

method returns all subsequent siblings between the two given parameters. next()The method returns the following sibling element that is immediately following the selected element.

The following example returns the following sibling element of each DIV element:

$(document).ready(function(){
　　$("div").next().css("background", "lightblue");
});

jQuery nextAll() method

method returns all subsequent siblings between the two given parameters. nextAll()The method returns all following sibling elements of the selected element.

The following example returns all following sibling elements of each DIV element:

$(document).ready(function(){
　　$("div").nextAll().css("background", "lightblue");
});

jQuery prev() method

method returns all subsequent siblings between the two given parameters. prev()The method returns the preceding sibling element that is immediately adjacent to the selected element.

The following example returns the preceding sibling element of each DIV element:

$(document).ready(function(){
　　$("div").prev().css("background", "lightblue");
});

jQuery prevAll() method

method returns all subsequent siblings between the two given parameters. prevAll()The method returns all preceding sibling elements of the selected element.

The following example returns all preceding sibling elements of each DIV element:

$(document).ready(function(){
　　$("div").prevAll().css("background", "lightblue");
});

jQuery nextUntil()和prevUntil()方法

method returns all subsequent siblings between the two given parameters. jQuery nextUntil() and prevUntil() MethodsnextUntil()

method returns all subsequent siblings between the two given parameters. jQueryprevUntil()

The following example returns all preceding siblings between the two given parameters.-2">All subsequent siblings after the next<dt>：</dt>

$(document).ready(function(){
　　$("#term-2").nextUntil("dt").css("background-"color", "coral");
});

The following example returns the<dt id="term-2">All preceding siblings, up to the preceding<dt>：</dt>

$(document).ready(function(){
　　$("#term-2").prevUntil("dt").css("background-"color", "coral");
});

jQuery Traversal Reference

For a complete reference of traversal methods, please visit ourjQuery Traversal Reference.