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.
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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 21/01/2021
3176 People Used
Only 97 Left
Rating
5.0