10 Really Helpful Traversing Functions in jQuery

With jQuery, selecting HTML elements is laughably easy. But at times, we may wish to further refine the selection, which can be a hassle when the HTML structure is complicated. In this tutorial, we'll explore ten ways that we can refine and extend a set of wrapped elements that we wish to operate upon.

The HTML

First of all, let's take a look at the simple webpage shown in the figure below. We'll be selecting elements in it throughout this tutorial.

div.container is the wrapping element.
div.photo, div.title and div.rating are immediate children of div.container.
Each div.star is a child of div.rating.
When a div.star has the 'on' class, it's a full star.

Why Traversing?

But why do we need to further refine a set of elements? Isn't jQuery's selection syntax powerful enough?

Well, let's see an example. In the webpage mentioned above, when a star is clicked on, we may wish to add the 'on' class to this very star and every single star to the left of it. And we may want to change the background color of the parent div of the stars. So we have the following code.


$('.star').click(function(){
	$(this).addClass('on');
//	How to select the parent div of 'this'?
//	How to select stars to the left side of 'this'?
});

In Line 2, we select the very star that gets clicked on with 'this'. But how do we select the parent div of the stars? Yes, it's div.rating. But there can be a dozen other div.ratings in a page, right? So which is the one we want? And how do we select all stars to the left of 'this'?

Fortunately, jQuery allows us to get new wrapped sets from an existing set, based on the hierarchical relationships. And this is in part what traversing functions do.

1. children

This function gets the immediate children of a set of elements.

This can be very handy in a variety of situations. Look at the figure below:

The container of the stars are selected initially.
A selector expression is passed to children() to narrow the result down to only the full stars.
If children() receives no parameters, all immediate children will be returned.
No grandchildren will be returned. Sorry.

2. filter

This function filters out elements from the wrapped set using a passed selector expression. Any elements that doesn't match the expression will be removed from the selection.

The following example should be pretty straightforward. The full stars are filtered out from a collection of all five stars.

3. not

Quite the opposite from filter(), not() removes the matching elements from the wrapped set.

See the example below. Even stars are removed from the selection, leaving only the odd ones.

Notice! "Even" and "odd" selectors are zero-indexed. They count index from 0, NOT 1.

4. add

What if we want to add some elements to the wrapped set? The add() function does this.

Again, very straightforward. The photo box is added to the selection.

5. slice

Sometimes we may wish to obtain a subset of the wrapped set, based on the position of elements within the set. And slice() is the way to go.

The first parameter is the zero-based position of the first element to be included in the returned slice.
The second parameter is the zero-based index of the first element NOT to be included in the returned slice. If omitted, the slice extends to the end of the set.
So slice(0, 2) selects the first two stars.

6. parent

The parent() function selects the direct parent of a set of elements.

As shown in the figure below, the first star's direct parent is selected. Very handy, hah? It should be noted that only the direct parent will be returned, which is why it's singular. No grandparent or ancestors will be selected.

7. parents

This one is plural! The parents() function selects all ancestors of a set of elements. I mean ALL ancestors from the direct parent all the way up to 'body' and 'html'. So it's best to pass a selector expression to narrow down the result.

By passing '.container' to parents(), div.container, which actually is the grandparent of the first star, is selected.

8. siblings

This function selects all siblings (brothers and sisters) of a set of elements. An expression can be passed to filter the result.

Look at the example:

Who's the first star's siblings? The other four stars, right?
The 'odd' siblings are selected as shown. Again, the index is zero-based. Look at the red numbers below the stars.

9. prev & prevAll

The prev() function selects the previous (one) sibling, and prevAll() selects all previous siblings of a set of elements.

This is super handy if you're building a star rating widget. The previous siblings of the third star are selected.

10. next & nextAll

These functions work in the same way as prev and prevAll, except for that they select the NEXT siblings.

Conclusion

At last, let's see how these functions solve a real world headache for us.


$('.star').click(function(){
	$(this).addClass('on');
	
//	How to select the parent div of 'this'?
	$(this).parent().addClass('rated');
	
//	How to select stars to the left side of 'this'?
	$(this).prevAll().addClass('on');
	$(this).nextAll().removeClass('on');
});

This is the very problem we mentioned early in this tutorial, right? Several traversing functions are used in these lines of code.

In Line 5, look at the use of parent(). Easy, hah?
In Line 8 and 9, prevAll() and nextAll() select the to-be full stars and empty stars.

Now, we have an idea how handy traversing functions can be. They can be even more powerful when used together. The output of one function can be the input of another - that is to say, they're chainable.

Thanks for reading! Hopefully this tutorial makes your life a bit easier when selecting HTML elements with jQuery. Any thoughts? Which traversing functions did we miss?