Traversing Sideways in the DOM Tree

In this lesson, we will explore different methods in jQuery that allow the user to traverse sideways in the DOM tree. Given the initial selection, these methods allow the user to query for sibling elements.

We will work on the web page shown below throughout the lesson. The web page consists of a div element with five child elements. These five elements, a, span, p, h3, and ul are siblings of each other.

The corresponding DOM Tree of the above web page is shown below:

The different sibling traversal methods, along with relevant examples, are as follows:

siblings() method

The siblings() method traverses sideways in the DOM tree to return all the siblings of the given element.

For example, in the web page discussed above, we assign a click event handler to the p element. In the event handler function, line 3, we access all the sibling elements of the given p element using the siblings() method. This is also shown in the illustration above. Then we change the border color of all the sibling elements to red in line 4.

Run the code below. In the web page output, click on the p element. Observe that the border color of all the sibling elements of p is changed to red.

next() and prev() methods

The next() method returns the following sibling of a given element, whereas the prev() method returns the preceding sibling of a given element.

Using the above web page as an example, we add two button elements, with text “next” and “prev”, inside the span element. We assign click event handlers to both the “next” and “prev” buttons. In the “next” button event handler function, we access the following sibling element of the given span element using the next() method. Similarly, in the “prev” button event handler function, we access the preceding sibling element of the given span element using the prev() method. These next() and prev() methods are also shown in the above illustration. In both event handlers, we change the border color of the accessed element to red.

Run the code below. In the web page output, click on the next button. Observe that the border color of the next sibling element of span changes to red. Now, click on the prev button and observe that the border color of the previous sibling element of span changes to red.

nextAll() and prevAll() methods

The nextAll() method returns all the following siblings of a given element, while the prevAll() method returns all the preceding siblings of a given element.

In the example discussed above, we replace the next() and prev() methods with nextAll() and prevAll(). We also change the “next” and “prev” button text with “nextAll” and “prevAll” respectively. These nextAll() and prevAll() methods are also shown in the illustration above.

Run the code below. In the web page output, click on the nextAll button. Observe that the border color of all the next sibling elements of p changes to red. Now, click on the prevAll button. Observe that the border color of all the previous sibling elements of p changes to red.

nextUntil() and prevUntil() methods

The nextUntil() and prevUntil() methods receive a selector as an argument. The selector in nextUntil() method specifies where to stop matching the following sibling elements; the selector in prevUntil() method specifies where to stop matching the preceding sibling elements. These methods return all the elements between the given element and the specified sibling.

Return to the example discussed above. We replace the nextAll() and prevAll() methods with nextUntil("ul") and prevUntil("a") respectively. We also change the “next” and “prev” button text with “nextUntil(ul)” and “prevUntil(a).” The nextUntil("ul") and prevUntil("a") methods are also shown in that above illustration.

Run the code below. In the web page output, click on the nextUntil("ul") button. Observe that the border color of all the next sibling elements between p and ul changes to red. Now, click on the prevUntil("a") button and observe that the border color of all the previous sibling elements between p and a changes to red.