Skip to main content

Traversing Up (ancestors)

In this tutorial, we're going to explore a key aspect of jQuery: traversing up or traversing ancestors. Traversing, in jQuery, refers to the process of moving through the DOM (Document Object Model) tree to select specific elements based on certain conditions. Specifically, 'traversing up' means moving upwards in the DOM tree, from child elements towards parent elements.

jQuery Traversing Up Methods​

jQuery provides a number of methods for traversing up the DOM tree. There are three main methods:

  1. .parent()
  2. .parents()
  3. .parentsUntil()

.parent()​

The .parent() method in jQuery returns the direct parent element of the selected element. Let's consider this HTML:

<div>Parent
  <p>Child</p>
</div>

If you use the .parent() method on the <p> element, it would return the <div> element, as it is the direct parent.

Example:

$("p").parent();

This will select the <div> element that is the parent of the <p> element.

.parents()​

The .parents() method, on the other hand, returns all ancestor elements of the selected element, not just the direct parent. Using the same HTML as above:

$("p").parents();

This will select both the <div> and <body> elements, as they are both parents of the <p> element.

.parentsUntil()​

The .parentsUntil() method returns all ancestor elements between two arguments. The method travels up the DOM tree until it finds the element specified by the parameter passed to the parentsUntil() method.

Example:

<div>Grandparent
  <div>Parent
    <p>Child</p>
  </div>
</div>

If you use the .parentsUntil() method on the <p> element, passing the <div> that contains "Grandparent" as the parameter, it would return the <div> that contains "Parent", as it is the parent of the <p> element but a child of the <div> that contains "Grandparent".

$("p").parentsUntil("div:contains('Grandparent')");

Conclusion​

Traversing up the DOM tree is an essential part of mastering jQuery. The .parent(), .parents(), and .parentsUntil() methods are powerful tools that allow you to select parent elements based on a variety of conditions. Practice using these methods, and you'll gain a strong understanding of how to traverse the DOM tree efficiently and effectively.