Traversing the DOM Tree with jQuery

by Curtiss   |   last updated June 21, 2010   |   Javascript Tutorials ·

Although jQuery can be extremely simple to use once you get the hang of it, there are so many functions and methods that it can be overwhelming and confusing at times.

One issue I had over the last week or so was figuring out how to simply traverse the DOM tree. Using jQuery selectors, it’s a breeze to do so; but what do you do when you’re working on a specific jQuery object and you want to go up or down the DOM tree?

If you just want to go up or down a single level; knowing that the DOM element you want to capture is always going to be either one level above or one level below your current object, you can simply use the children() or parent() methods.

However, if you can’t be certain that the element you want to manipulate will be a single level above or below the current object, you need to use different methods. Let’s say, for instance, that you use jQuery to find a “select” element within a page. Once you get ahold of that select element, you then want to perform some sort of operation on all of the “option” elements inside of that select.

Off-hand, you might think that you could easily perform those operations with some code similar to the following:

$('select').click(function() {
  $(this).children('option').each(function() {
    console.log('The value of this option is ' + $(this).val() );
  });
});

However, if you have any options that are inside of optgroup elements, jQuery will skip right over those when using the children() method; as it will only traverse the direct descendants of the select element.

To get at those options, you need to use something like the find() method in jQuery. Therefore, your code would look more like:

$('select').click(function() {
  $(this).find('option').each(function() {
    console.log('The value of this option is ' + $(this).val() );
  });
});

Now, let’s reverse this concept. Let’s say you have one of the options in your select element already stored as a jQuery object; and you decide you want to perform some operation on the parent select element. Again, if you just had a single level of options, without any optgroup elements, you could just use the parent() method. However, if you have optgroup elements in your select, you might accidentally get the optgroup (or nothing at all) instead of the select you want.

To get ahold of that select element, no matter what, you should use the closest() method. Then, your code would look something like:

$('#myOpt').click(function() {
  $(this).closest('select').change(function() {
    console.log('We found the select element');
  });
});

Another helpful method for DOM traversal is the parentsUntil() method. The parentsUntil() method will find all of the parent elements until it reaches the selector you use as the method parameter. It will not, however, include the element that matches the selector, itself.

More information about all of the jQuery DOM traversal methods can be found within the jQuery documentation. There are quite a few methods designed to move up, down, backwards and forwards on the DOM tree.