Learn to Traverse jQuery Siblings: Method Usage Defined

jQuery siblings are elements that have the same parent. For instance, if we apply the .siblings() method to a specific HTML element, all of its siblings are going to be returned.

In this tutorial, we discuss other options as well: the .next() method, used to present jQuery next sibling, and .prev() function to get jQuery previous sibling. Find out more by reading this whole tutorial and reviewing the code examples provided.

jQuery Sibling: Main Tips

• jQuery sibling traversing refers to moving through the DOM tree to find siblings of a specified element.
• There are seven methods used for sibling traversing.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Traversing Methods Explained

When traversing downwards, jQuery provides these methods:

• .siblings(): return siblings of the selected element.
• .next(): return the following sibling of the selected element.
• .nextAll(): return all following siblings of the selected element.
• .children(): return all following siblings between the selected element and the matched sibling.
• .prev(): return the jQuery previous sibling of the selected element.
• .prevAll(): return all previous siblings of the selected element.
• .prevUntil(): return all previous siblings between the selected element and the matched sibling.

.siblings()

The .siblings() method gets the elements that have the same parent as the selected one:

$(selector).siblings([filter])

Additionally, you can add an optional selector, which will filter the jQuery siblings of the selected element.

This code example illustrates the usage of this method:

// Selects all siblings of <h1> elements in the document
$("span").siblings();

// Selects only those siblings of <h1> elements that are <p> elements
$("span").siblings("p");

.next()

This method returns the sibling that is directly adjacent to the selected element, and is after it in the document layout:

$(selector).next([filter])

Optionally, you can add a selector to make it, so the next element is only selected if it matches the selector.

Here is a code example to illustrate how this method is used to get the jQuery next sibling:

// Selects the element following <h1>
$("span").next();

// Selects the element following <h1> if it's a <p> element
$("h3").next("p");

.nextAll()

The .nextAll() method returns all following siblings:

$(selector).nextAll([filter])

You can also add a selector here to filter which of the following siblings are to be selected.

Here is a code example to illustrate how this method is used:

// Selects all elements following <h1>
$("h1").nextAll();

// Selects elements following <h1> if they are <p>elements
$("h1").nextAll("p");

.nextUntil()

This method gets the siblings jQuery locates after the selected one in the layout, until the specified type of element is found:

$(selector).nextUntil(selector,[filter])

In this case, the first selector is required, and the filter selector can be omitted. However, if entered, only elements between the two selected types that match the filter will go through.

Analyze the way this method can be applied:

$("p").nextUntil("h6").css({
  "color": "blue", 
  "border": "2px solid lightblue"
});

.prev()

This method allows jQuery get sibling that is directly adjacent to the selected element, and is before it in the document layout:

$(selector).prev([filter])

Optionally, you can add a selector. Therefore, the next element is only selected if it matches the selector.

Take a look at the usage of this function:

// Selects the element before <h1>
$("p").prev();

// Selects the element before <p>if it's a <h3> element
$("p").prev("h3");

.prevAll()

The .prevAll() method returns all previous siblings:

$(selector).prevAll([filter])

You can also add a selector here, to filter which of the previous siblings jQuery will select.

Here is a code example to illustrate how this method is used:

// Selects all elements before <p>
$("p").prevAll();

// Selects elements before <p> if they are <h3> elements
$("p").prevAll("h3");

.prevUntil()

This method makes jQuery get siblings that are found before the selected one in the layout, until the specified type of element is found:

$(selector).prevUntil(selector,[filter])

The first selector must be inserted, and the filter selector can be omitted. However, if you decide to add it, only elements between the two selected types that match the filter will go through.

The following code example illustrates how this method is used:

// Selects all elements before <p>
$("p").prevUntil();

// Selects elements before <p> if they are <h3> elements
$("p").prevUntil("h3");

jQuery Sibling: Summary

• By applying the methods for traversing siblings, you will be able to retrieve siblings of the element you indicated.
• The DOM can be searched for siblings with seven functions that jQuery provides.