jQuery Descendants

jQuery DOM Traversal: Finding Descendants

DOM traversal means moving through the structure of your HTML document to find specific elements based on their relationship to other elements.

A ‘descendant’ refers to any element nested inside another element, at any level – children, grandchildren, great-grandchildren, and so on. jQuery provides methods to efficiently find these descendants.

Traversing Down the DOM Tree

Two primary jQuery methods for finding descendant elements are:

• .children(): Finds direct children only (one level down).
• .find(): Finds all descendants matching a selector, no matter how deeply nested.

The jQuery .children() Method

The .children() method returns a collection of the immediate child elements of each element in the matched set. It only travels a single level down the DOM tree.

Imagine a family tree: .children() finds only your direct sons and daughters, not your grandchildren.

Example HTML:

<div class="container">
  <p>Paragraph 1 (direct child)</p>
  <span>Span 1 (direct child)</span>
  <ul> <!-- Direct child -->
    <li>List item (grandchild)</li>
  </ul>
</div>

Example jQuery:

// Get all direct children of the div with class "container"
let directChildren = $(".container").children();
// directChildren will contain the <p>, <span>, and <ul> elements

// Optionally filter children by selector:
// Get only direct children that are <p> elements
let pChildren = $(".container").children("p");
// pChildren will contain only the <p> element

The jQuery .find() Method

The .find() method searches through all descendants of the selected elements (children, grandchildren, etc.) and returns a collection of elements that match the provided selector.

Using the family tree analogy: .find() searches your entire lineage downwards for anyone matching the criteria.

Example HTML (same as above):

<div class="container">
  <p>Paragraph 1 (direct child)</p>
  <span>Span 1 (direct child)</span>
  <ul> <!-- Direct child -->
    <li>List item (grandchild)</li>
  </ul>
</div>

Example jQuery:

// Find ALL <li> elements anywhere inside the container
let listItems = $(".container").find("li");
// listItems will contain the <li> element

// Find ALL descendant elements (any tag) inside the container
let allDescendants = $(".container").find("*");
// allDescendants will contain the <p>, <span>, <ul>, and <li> elements

Choosing between .children() and .find():

• Use .children() when you specifically need only the elements directly nested one level below.
• Use .find() when you need to search deeper within the element’s structure for descendants matching a selector. .find() is generally more versatile for searching within a specific section of your page.

Further Learning

jQuery offers many other traversal methods for moving sideways (siblings) and upwards (ancestors). Consult the official jQuery API documentation on Traversing for a complete reference.