jQuery Traversing (Navigation)

What exactly is traversing?

jQuery traversing would be used to "discover" (or select) HTML components based on their connection to other elements. Begin with one option and work your way with it until you achieve the desired elements.

 

An HTML page is depicted as a tree in the image below (DOM tree). Folks can quickly travel up (ancestors), down (descendants), sidewards (siblings) in the tree using jQuery traversing, beginning from the chosen (current) element. This is alluded to as traversing - or starting to move into it - the DOM tree.

Explanation of the illustrative example:

The <div> element is the parent of <ul>, and an ancestor of everything inside of it

The <ul> element is the parent of both <li> elements, and a child of <div>

The left <li> element is the parent of <span>, child of <ul> and a descendant of <div>

The <span> element is a child of the left <li> and a descendant of <ul> and <div>

The two <li> elements are siblings (they share the same parent)

The right <li> element is the parent of <b>, child of <ul> and a descendant of <div>

The <b> element is a child of the right <li> and a descendant of <ul> and <div>

 

A parent, a grandparent, a great-grandparent, and so on are all examples of ancestors.

A descendant somebody who is a child, grandchild, great-grandchild, and so on.

 

Siblings are tried to raise by the same parent.

 

Crossing the DOM

The DOM can be navigated using a range of techniques provided by jQuery. Tree traversal is the most popular type of traversal method. The following chapters will demonstrate how to navigate the DOM tree by going up, down, and sideways.


Ancestors in jQuery Traversing

jQuery can traverse the DOM tree to discover an element's ancestors.

A parent, a grandparent, a great-grandparent, etc are all examples of ancestors.

Attempting to climb the DOM Tree

The steps are three basic jQuery techniques for navigating the DOM tree:

parent()

parents()

parentsUntil()


jQuery parent() Function

The direct parent of the connected component is brought back by the parent() method.

This method only must go one peak higher than or equal the DOM tree.

The instance below comes back the immediate parent aspect of each span> component:

Illustration:

EXAMPLE ❯


parents() method through jQuery

Only those ancestor elements of a target element are returned by the parents() method, all the upwards from to the statement's primary root (html>).

The instance below comes back all ancestors of any and all <span> elements:

Illustration:

EXAMPLE ❯


An optional parameter could also be used to determine the response for ancestors.

Only those ancestors of all <span> components that are <ul> elements are brought back in the example below:

Illustration:

EXAMPLE ❯


Method jQuery parentsUntil()

Between two given arguments, the parentsUntil() function compares all ancestor elements.

The illustration below comes back all ancestor components between a <span> and a <div> element:

Illustration:

 

EXAMPLE ❯