Category: Traversing

Traversing Descendants

jQuery provides methods to traverse downwards inside the DOM tree to find descendant(s) of a given element. These methods can be used to find a child, grandchild, great-grandchild, and so on for a given element inside the DOM.

There are following three methods to traverse downwards inside the DOM tree:

children() – returns all the direct children of the matched element.
find() – returns all the descendant elements of the matched element.

The children() method differs from find() in that children() only travels a single level down the DOM tree where as find() method can traverse down multiple levels to select descendant elements (children, grandchildren, great-grandchildren etc.) as well.

jQuery children() Method

The jQuery children() method returns all the direct children of the matched element. Following is a simple syntax of the method:

$(selector).children([filter])

We can optionally provide a filter selector in the method. If the filter is supplied, the elements will be filtered by testing whether they match it.

Synopsis

Consider the following HTML content:

<div class="great-grand-parent"><div class="grand-parent"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div><div class="grand-parent"><ul class="parent"><li class="child-three">Child Three</li><li class="child-four">Child Four</li></ul></div></div>

Now if we use the children() method as follows:

$(".great-grand-parent").children().css("border","2px solid red");

It will produce following result:

<div class="great-grand-parent"><div class="grand-parent" style="border:2px solid red"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div><div class="grand-parent" style="border:2px solid red"><ul class="parent"><li class="child-three">Child Three</li><li class="child-four">Child Four</li></ul></div></div>

Example

Let’s try the following example and verify the result:

<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("button").click(function(){$(".great-grand-parent").children().css("border","2px solid red");});});</script><style>.great-grand-parent *{display:block; border:2px solid #aaa; color:#aaa; padding:5px; margin:5px;}</style></head><body><div class="great-grand-parent"><div class="grand-parent" style="width:500px;"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div><div class="grand-parent" style="width:500px;"><ul class="parent"><li class="child-three">Child Three</li><li class="child-four">Child Four</li></ul></div></div><br><button>Mark Children</button></body></html>

jQuery find() Method

The jQuery find() method returns all descendants of the matched element. Following is a simple syntax of the method:

$(selector).find([ilter)

Here filter selector is mandatory for this method. To return all the descendants of the matched element, we need to pass * as a filter otherwise if the filter is supplied as an element, the elements will be filtered by testing whether they match it.

Synopsis

Consider the following HTML content:

<div class="great-grand-parent"><div class="grand-parent"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div><div class="grand-parent"><ul class="parent"><li class="child-three">Child Three</li><li class="child-four">Child Four</li></ul></div></div>

Now if we use the find(“li”) method as follows:

$(".grand-parent").find("li").css("border","2px solid red");

It will produce following result:

<div class="great-grand-parent"><div class="grand-parent"><ul class="parent"><li class="child-one"  style="border:2px solid red">Child One</li><li class="child-two"  style="border:2px solid red">Child Two</li></ul></div><div class="grand-parent" style="border:2px solid red"><ul class="parent"><li class="child-three"  style="border:2px solid red">Child Three</li><li class="child-four"  style="border:2px solid red">Child Four</li></ul></div></div>

Example

Let’s try the following example and verify the result:

<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("button").click(function(){$(".grand-parent").find("li").css("border","2px solid red");});});</script><style>.great-grand-parent *{display:block; border:2px solid #aaa; color:#aaa; padding:5px; margin:5px;}</style></head><body><div class="great-grand-parent"><div class="grand-parent" style="width:500px;"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div><div class="grand-parent" style="width:500px;"><ul class="parent"><li class="child-three">Child Three</li><li class="child-four">Child Four</li></ul></div></div><br><button>Mark Children</button></body></html>

jQuery Traversing Reference

You can get a complete reference of all the jQuery Methods to traverse the DOM at the following page: jQuery Traversing Reference.

August 21, 2025

Traversing Ancestors

jQuery provides methods to traverse upwards inside the DOM tree to find ancestor(s) of a given element. These methods can be used to find a parent, grandparent, great-grandparent, and so on for a given element inside the DOM.

There are following three methods to traverse upward inside the DOM tree:

parent() – returns the direct parent of the each matched element.
parents() – returns all the ancestor elements of the matched element.
parentsUntil() – returns all ancestor elements until it finds the element given as selector argument.

jQuery parent() Method

The jQuery parent() method returns the direct parent of the each matched element. Following is a simple syntax of the method:

$(selector).parent([filter])

We can optionally provide a filter selector in the method. If the filter is supplied, the elements will be filtered by testing whether they match it.

Synopsis

Consider the following HTML content:

<div class="great-grand-parent"><div class="grand-parent"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div></div>

Now if we use the parent() method as follows:

$(".child-two").parent().css("border","2px solid red");

It will produce following result:

<div class="great-grand-parent"><div class="grand-parent"><ul class="parent" style="border:2px solid red"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div></div>

Example

Let’s try the following example and verify the result:

<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("button").click(function(){$(".child-two").parent().css("border","2px solid red");});});</script><style>.great-grand-parent *{display:block; border:2px solid #aaa; color:#aaa; padding:5px; margin:5px;}</style></head><body><div class="great-grand-parent"><div style="width:500px;"class="grand-parent"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div></div><br><button>Mark Parent</button></body></html>

You can try the same example by creating another block of parent and child elements with the same classes and then verify that parent() will apply given CSS to all the matched elements.

jQuery parents() Method

The jQuery parents() method returns all the ancestor elements of the matched element. Following is a simple syntax of the method:

$(selector).parents([filter])

We can optionally provide a filter selector in the method. If the filter is supplied, the elements will be filtered by testing whether they match it.

The parents() and parent() methods are similar, except that the parent() method only travels a single level up the DOM tree. Also, $( “html” ).parent() method returns a set containing document whereas $( “html” ).parents() returns an empty set.

Synopsis

Consider the following HTML content:

<div class="great-grand-parent"><div class="grand-parent"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div></div>

Now if we use the parents() method as follows:

$(".child-two").parents().css("border","2px solid red");

It will produce following result:

<div class="great-grand-parent" style="border:2px solid red"><div class="grand-parent" style="border:2px solid red"><ul class="parent" style="border:2px solid red"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div></div>

Example

Let’s try the following example and verify the result. Here we are going to filter only <div> elements for clarity purpose:

<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("button").click(function(){$(".child-two").parents("div").css("border","2px solid red");});});</script><style>.great-grand-parent *{display:block; border:2px solid #aaa; color:#aaa; padding:5px; margin:5px;}</style></head><body><div style="width:525px;"class="great-grand-parent"><div style="width:500px;"class="grand-parent"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div></div><br><button>Mark Parents</button></body></html>

jQuery parentsUntil() Method

The jQuery parentsUntil() method returns all the ancestor elements available between two selectors. Following is a simple syntax of the method:

$(selector1).parentsUntil([selector2][,filter])

We can optionally provide a filter selector in the method. If the filter is supplied, the elements will be filtered by testing whether they match it.

Synopsis

Consider the following HTML content:

<div class="great-grand-parent"><div class="grand-parent"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div></div>

Now if we use the parentsUntil() method as follows:

$(".child-two").parentsUntil(".great-grand-parent").css("border","2px solid red");

It will produce following result:

<div class="great-grand-parent"><div class="grand-parent" style="border:2px solid red"><ul class="parent" style="border:2px solid red"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div></div>

Example

Let’s try the following example and verify the result:

<!doctype html><html><head><title>The jQuery Example</title><script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script><script>$(document).ready(function(){$("button").click(function(){$(".child-two").parentsUntil(".great-grand-parent").css("border","2px solid red");});});</script><style>.great-grand-parent,.great-grand-parent *{display:block; border:2px solid #aaa; color:#aaa; padding:5px; margin:5px;}</style></head><body><div style="width:525px;"class="great-grand-parent"><div style="width:500px;"class="grand-parent"><ul class="parent"><li class="child-one">Child One</li><li class="child-two">Child Two</li></ul></div></div><br><button>Mark Parents</button></body></html>

jQuery Traversing Reference

You can get a complete reference of all the jQuery Methods to traverse the DOM at the following page: jQuery Traversing Reference.

August 21, 2025

DOM Traversing
jQuery is a very powerful tool which provides a variety of DOM traversal methods to help us select elements in an HTML or XML document randomly as well as in sequential method. Elements in the DOM are organized into a tree-like data structure that can be traversed to navigate, locate the content within an HTML or XML document.

Document Object Model (DOM) – is a W3C (World Wide Web Consortium) standard that allows us to create, change, or remove elements from the HTML or XML documents.

The DOM tree can be imagined as a collection of nodes related to each other through parent-child and sibling-sibling relationships and the root start from the top parent which is HTML element in an HTML document.

Before we start traversing a DOM, Let’s understand the terminology of parent, child and sibling. Letâs see an example:
```
<body><p>This is paragrah</p><div><span>This is div</span></div><button id="b1">Get width</button><button id="b2">Set width</button></body>
```
In the above example, we have a <body> element at the top, which is called a parent for all the elements. The <div>, <p> and <button> elements inside the <body> element are called siblings. Again <span> element inside <div> is a child of <div> and <div> is called a parent of <span> element.

The <div> element is a next sibling of the <p> element and <p> is the previous sibling of the <div> element.

Traversing the DOM

Most of the DOM Traversal Methods do not modify the jQuery DOM object and they are used to filter out elements from a document based on given conditions. jQuery provides methods to traverse in the following three directions:
- Traversing Upwards – This direction means traversing the ancestors (Parent, Grandparent, Great-grandparent etc.)
- Traversing Downwards – This direction means traversing the descendants (Child, Grandchild, Great-grandchild etc.)
- Sideways – This direction means traversing the ancestors the siblings (Brother, sisters available at the same level)
We will learn all the above traversing methods starting from the next chapter.

jQuery Traversing Reference

You can get a complete reference of all the jQuery Methods to traverse the DOM at the following page: jQuery Traversing Reference.
August 21, 2025

Category: Traversing

Traversing Descendants

jQuery children() Method

Synopsis

Example

jQuery find() Method

Synopsis

Example

jQuery Traversing Reference

Traversing Ancestors

jQuery parent() Method

Synopsis

Example

jQuery parents() Method

Synopsis

Example

jQuery parentsUntil() Method

Synopsis

Example

jQuery Traversing Reference

DOM Traversing

Traversing the DOM

jQuery Traversing Reference