What Does the jQuery find() Method Search For?

The jQuery find() method is a DOM traversal function used to search through the descendants of selected elements down through multiple levels of the HTML tree. This article explains precisely what elements find() targets, how it navigates the Document Object Model (DOM), the parameters it accepts, and how it differs from other traversal methods like children().

Descendant Traversal Explained

The find() method searches for all descendant elements that match a specified selector, jQuery collection, or element object. A descendant is any element nested inside the target element, regardless of how deep it resides in the hierarchy. This includes:

• Direct child elements (one level down)
• Grandchild elements (two levels down)
• Great-grandchildren and all subsequent nested tags

Unlike top-level selection (such as $('span')), find() limits the search scope strictly to the subtree rooted at the elements in the current jQuery selection.

Syntax and Parameters

The basic syntax for the method is:

$(selector).find(filter)

• filter (Required): A string containing a selector expression (such as a tag name, class, ID, or attribute), an element, or a jQuery object.

Unlike many other jQuery filtering methods, passing a selector parameter to find() is mandatory. Calling .find() without an argument returns an empty jQuery object.

find() vs. children()

A common point of confusion is the difference between find() and children():

• children() traverses only a single level down the DOM tree. It inspects direct child elements only.
• find() traverses all levels down the DOM tree, searching through every layer of nested descendants until it reaches the end of the branch.

Practical Example

Consider the following HTML markup:

<div class="card">
  <div class="card-body">
    <p>Card description with a <span class="highlight">highlighted</span> word.</p>
  </div>
</div>

If you execute:

// Returns empty: <span> is two levels down, not a direct child of .card
$('.card').children('span'); 

// Successfully selects <span class="highlight">: searches all descendant levels
$('.card').find('span'); 

Special Usage: The Universal Selector

To retrieve all descendants of an element regardless of their tag name or class, pass the universal selector ("*") into the method:

$('.card').find('*');

This returns every element nested inside .card, including .card-body, <p>, and <span>.

Summary

The jQuery find() method searches downwards through every level of descendant elements inside the selected container to find elements that match a specified filter. It is the primary tool in jQuery for scoped, deep DOM tree searching.