JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE

jQuery Traversing Descendants

In this tutorial you will learn how to traversing down the DOM tree using jQuery.

Traversing Down the DOM Tree

In logical relationships a descendant is a child, grandchild, great-grandchild, and so on.

jQuery provides the useful methods such as children() and find() that you can use to traverse down in the DOM tree either single or multiple levels to easily find or get the child or other descendants of an element in the hierarchy.

jQuery children() Method

The jQuery children() method is used to get the direct children of the selected element.

The following example will highlight the direct children of the <ul> element which is <li> by adding the class .highlight on document ready.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery children() Demo</title>
  • <style type="text/css">
  •     .highlight{
  •         background: yellow;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("ul").children().addClass("highlight");
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="container">
  •         <h1>Hello World</h1>
  •         <p>This is a <em>simple paragraph</em>.</p>
  •         <ul>
  •             <li>Item One</li>
  •             <li>Item Two</li>
  •         </ul>
  •     </div>
  • </body>
  • </html>

jQuery find() Method

The jQuery find() method is used to get the descendant elements of the selected element.

The find() and children() methods are similar, except that the find() method search through multiple levels down the DOM tree to the last descendant, whereas the children() method only search a single level down the DOM tree. The following example will add a border around all the <li> elements that are descendants of the <div> element.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery find() Demo</title>
  • <style type="text/css">
  •     *{
  •         margin: 10px;
  •     }
  •     .frame{
  •         border: 2px solid green;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("div").find("li").addClass("frame");
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="container">
  •         <h1>Hello World</h1>
  •         <p>This is a <em>simple paragraph</em>.</p>
  •         <ul>
  •             <li>Item One</li>
  •             <li>Item Two</li>
  •         </ul>
  •     </div>
  • </body>
  • </html>

However, if you want to get all the descendant elements you can use the universal selector.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery find() Demo</title>
  • <style type="text/css">
  •     *{
  •         margin: 10px;
  •     }
  •     .frame{
  •         border: 2px solid green;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("div").find("*").addClass("frame");
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="container">
  •         <h1>Hello World</h1>
  •         <p>This is a <em>simple paragraph</em>.</p>
  •         <ul>
  •             <li>Item One</li>
  •             <li>Item Two</li>
  •         </ul>
  •     </div>
  • </body>
  • </html>

Your Feedback:

We would love to hear from you, please drop us a line.