🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

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.
DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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.