jQuery DOM Traversing

→ Are you a new visitor? Please visit the page guidance for new visitors ←

jQuery DOM Traversing

Once you have made an initial selection with jQuery as we learned in the past tutorial about jquery selectors, you can traverse deeper into what was just selected. In order to master the DOM traversal you have to  be familiar with three basic parts: parents, children, and siblings. jQuery has lots of methods for all these parts, and they are very easy to be used. This tutorial is split in three parts, based on the place that you start traversing: parents, children and siblings. First, imagine the next html structure:

Parents

This is the first “criteria” that we talk about when it comes to DOM traversal. Here we have some jQuery methods that help us to select parent or parents of the first selected item. They are .parent(), .parents(), .parentsUntil() and .closest();

Exercise: We have to select the parent of the first li element. We don’t want to do that directly (for the sake of this tutorial), but instead, we want to use this new traversal that we are talking about. First, we get the first li element and then call the .parent() jquery method on it like this:

This is selecting the parent of the first li (with item1 class). Perfect ! Now, what if we want to select all the parents for this li element? You guessed it well, we use .parents(). This method without a parameter, will select everything from the top layers (ancestors). If we give as a string parameter ‘body’, it will travel through the ancestors until it finds the body element and return that.

Pretty easy huh?

The .parents() and .parent() methods are similar, except that the .parent() method only travels a single level up the DOM tree. We have more methods for parents including .parentsUntil() or .closest().

  • .parentsUntil() gets the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
  • .closest() begins with the current element, travels up the DOM and returns the first ancestor that matches the given parameter as a string, and then return the object that can contain either zero or one element. Example:

Children

The methods for finding child elements from a selection include .children() and .find(). The difference between these methods lies in how far into the child structure the selection is made. .children() only operates on direct child nodes, while.find() can traverse recursively into children, children of those children, and so on. The .children() method is very similar with the .parents() method but it is running in the opposite direction. It is selecting (as it’s name says) the children of a selected element, not the parents. Example: We want to select all the children of our ul element. We simply call .children() on it.

Siblings

Other DOM traversal operations are constructed for accessing the siblings of a selected element. .next() is selecting the next element based on the position of the selected one. Example: 

  • .prev() is selecting the previous element (reverse .next() method)
  • .siblings() is selecting all the elements from the same level with the one we first selected.

List with all traversal methods

You can find here on their official documentation all the available methods for DOM traversing with examples and explanation.

Summary

I hope you enforced your achieved knowledge from the past tutorial and learn a few new things about jquery. In the next tutorial we will talk about the available jquery css methods. Until next time, easy learning!

Request an article ←