Finding elements using jQuery - Part 3

In this part of the series, I will be discussing a few more ways that are offered by jQuery to traverse siblings of an element.

The methods that we are going to discuss in this post are

prev()
prevAll()
prevUntil()
next()
nextAll()
nextUntil()

All these functions provide us with a way to traverse the siblings of a given DOM element. Lets see some examples.

0
a
b
c

The prev() function selects the DOM element that lies immediately above the current element. So, if we were to apply the prev function to our list item3, it would select the list item 2. However, if you want to select the previous item only if it matches a particular criteria, then you can pass a selector to the prev() function. Note tat the selector function DOES not select the first matching previous sibling. Instead it first select the previous sibling, and then applies the test criteria to it.

$(".item3").prev().addClass("highlighted");

The above code would select the second list item and would add a class called highlighted to it.

Now lets see this

$(".item3").prev(".other").addClass("highlighted");

The above code would select the previous element and then check if it has a class called other. If not, as it in in our case, it will return an empty jQuery object(note that an empty jQuery object is not a null object. Its just like an empty array). The addClass function is called on the empty array and hence has no effect.

Now lets take a look at the prevAll() function

$(".item3").prevAll().addClass("highlighted");

This function, when called without the arguments will select all the previous siblings of the current element. In our case, all list items except list item with clas .item3 will be selected.

When passed an argument, only those previous siblings are returned that satisfy the test criteria.

$(".item3").prevAll(".item1").addClass("other");

In this case, only the previous siblings that have the class as 'other' will be returned by the selector.

Sometimes you have a requirement of selecting the first previous sibling that matches your selection criteria. For example in the below DOM structure, i have 2 list items with a class called 'other'. Suppose that i am traversing from list item 'item3' and i need to get the item having the html value of 'a'.i.e. the second list item.

0
a
b
c

Here is how it can be done

$(".item3").prevAll(".other").eq(0).addClass("highlighted");

As you see, the prevAll function will traverse in upwards in the DOM for all the siblings. Since you need the first match, you select the element 0 of the matched set and apply your style class to it.

Another very useful function is the prevUntil() function. this function is used to select all the DOM siblings, before the current element, until an element is found that satisfies the search criteria.

$(".item3").prevUntil(".other").addClass("highlighted");

So, in our example, all the previous list items of class 'item3' will be selected until a list item with class 'other' is found on the DOM. This function, when called without the selector argument, works the same way as the prevAll function. So, it would be pointless to call this function without the selector argument.

The other functions - next(), nextAll() and nextUntil() work in exactly the same way as their counterpart function, apart from the fact that instead of selecting the previous siblings, these functions work on the siblings that follow the currently selected element.

These six functions make traversing in a given sibling structure pretty easy.

Happy Programming :)
Signing Off
Ryan