Seize the opportunity to gain new skills and reshape your career!

Choose a free learning path and get valuable insights from first-rate courses

Code has been added to clipboard!

jQuery Traverse Explained: Find Elements According to Their Relations

Reading time 3 min
Published Jul 3, 2019
Updated Oct 1, 2019

The process of jQuery traverse is described as finding parents and ancestors of different HTML elements by moving through the DOM of a web page. In other words, we create an initial selection and start traversing the DOM.

You can also make the jQuery DOM traversal more specific by adding filters. For instance, you can limit the process to elements with a particular class.

Bear in mind that the most common jQuery traversing methods won't be capable of modifying the elements. They are designed to help developers specify which items they want to get the information about. This tutorial provides you with the basics of traversing so you would understand the process in general.

jQuery Traverse: Main Tips

  • jQuery traversing refers to a process of moving through the DOM to find specific HTML elements.
  • This search depends on the relations between elements.
  • jQuery provides multiple methods for traversing the DOM conveniently and dynamically.
Theory is great, but we recommend digging deeper!

Traversing Basics

To traverse means to move through. To jQuery, traverse means to use methods for accessing and finding certain elements within the DOM.

Here is an example of an HTML document layout. We will analyze this example and explain the traverse basics as well. You can also see the .parentsUntil() method being applied. It is one of the methods you can retrieve from the jQuery library.

This layout has a clear structure, which we will investigate using relevant terms:

  • <div> is the parent of <ul>, and an ancestor to every element in it.
  • <ul> is the parent to the <li> elements, as well as a child to <div>.
  • <li1> and <li2>are siblings because they have a shared parent.
  • <li1> is a parent to <span1>, child to <ul> and a descendant to <div>.
  • <li2> is the parent to <span>, child to <ul> and a descendant to <div>.
  • <span1> is a child of <li1> as well as a descendant to <div> and <ul>.
  • <span2> is a child to <li2> as well as a descendant to <div> and <ul>.

For a more in-depth look at the node relationships, look at the JavaScript HTML DOM Navigation tutorial. That will also help to understand jQuery DOM traversal better.

jQuery Traverse: Summary

  • To jQuery traverse means that you apply specific methods to retrieve information on relations between HTML elements.
  • You can get methods that are applied for traversing from jQuery library.