DOM Traversal Methods

The jQuery selectors that we have explored so far allow us to get a set of elements as we navigate across and down the DOM tree and filter the results. If this were the only way to get elements, our options would be quite limited (although, frankly, the selector expressions on their own are robust in their own right, especially when compared to the regular DOM scripting). There are many occasions on which getting a parent or ancestor element is essential. And that is where jQuery’s DOM traversal methods come to play. With these methods at our disposal, we can go up, down, and all around the DOM tree with ease.

Some of the methods have a nearly identical counterpart among the selector expressions. For example, the line we used to add the odd class, $('tr:odd'). addClass('odd');, could be rewritten with the .filter() method as follows:

$('tr').filter(':odd').addClass('odd');

For the most part, however, the two ways of getting elements complement each other. Let’s take a...