jQuery .find() Method

What You’ll Learn

The .find() traversing method searches descendants of each element in the current set and returns a new jQuery collection of matches. This tutorial covers the official nested list demo, paragraph span examples, jQuery collection filtering, chaining with .end(), and compares .find() with .children() and .filter().

Introduction

After selecting a container — a list item, a div, a table cell — you often need elements inside it: nested list items, spans in paragraphs, inputs in a form section. The .find() method walks down the DOM tree from each matched parent and collects descendant elements that match your selector.

Available since jQuery 1.0 (with jQuery object / DOM element filtering since 1.6), .find() is one of the most-used traversing tools. It is equivalent to scoped selector context: $("li.item-ii").find("li") works like $("li", "li.item-ii").

Understanding the .find() Method

Given a jQuery object representing a set of DOM elements, .find(selectorOrElement) searches through the descendants of those elements and constructs a new jQuery object from the matches. The starting elements themselves are never included — only nodes below them in the tree.

Unlike .children(), which stops at one level, .find() continues through nested structures at any depth. Unlike .filter(), it can return elements that were not part of the original matched set.

📝 Syntax

General forms of .find:

.find( selector )

.find( element )

.find( jQueryObject )

Parameters

• selector (since 1.0) — a string containing a selector expression. Required unless passing an element or jQuery object. Use "*" for all descendants.
• element (since 1.6) — a DOM node; keeps only descendants matching this element.
• jQuery object (since 1.6) — keeps only descendants that appear in the provided jQuery collection.

Return value

• A new jQuery object containing descendant elements that match the selector or intersect with the provided element/collection.

Official jQuery API nested list example

$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );

// Red on A, B, 1, 2, 3, C — item II itself is NOT included

Examples Gallery

Examples 1–4 follow the official jQuery API documentation. Use DevTools or the Try-it links to run each snippet in the browser.

$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );

A, B, 1, 2, 3, C → red background

Item II itself → NOT included (descendants only)

$( "p" ).find( "span" ).css( "color", "red" );

Spans inside p → red

Spans outside p → unchanged (blue in demo)

var spans = $( "span" );

$( "p" ).find( spans ).css( "color", "red" );

p spans → red (intersection of p descendants + all spans)

Other spans → stay blue

var newText = $( "p" ).text().split( " " ).join( " " );

newText = " " + newText + " ";

$( "p" )

  .html( newText )

  .find( "span" )

  .hover(function () {

    $( this ).addClass( "hilite" );

  }, function () {

    $( this ).removeClass( "hilite" );

  })

  .end()

  .find( ":contains('t')" )

  .css({ "font-style": "italic", "font-weight": "bolder" });

Each word wrapped in span → hover highlights yellow

Words containing "t" → italic bold (short, matters, stop, etc.)

$( "#children-demo li" ).children( "li" ).css( "color", "green" );

$( "#find-demo li" ).find( "li" ).css( "color", "red" );



// Same nested ul — different depth

.children("li") → green direct child li only (A, B)

.find("li") → red ALL nested li (A, B, 1, 2, 3, C)

🚀 Common Use Cases

• Form fields inside a section — $(".checkout").find("input, select").
• Table cells in a row — $("tr.selected").find("td.price").
• Nested menu items — $("li.active").find("a").
• Widget internals — $(".modal").find(".close-btn").
• Scoped re-query — $("div.panel").find("span.highlight") after dynamic HTML updates.
• Return to container — chain .end() after .find() to style the parent again.

📝 Notes

• Available since jQuery 1.0; jQuery object / DOM element form since 1.6.
• Selector argument is required — use "*" for all descendant elements.
• Starting elements are never included — descendants only.
• Equivalent to scoped context: $("li.item-ii").find("li") ≡ $("li", "li.item-ii").
• Pushes onto jQuery’s internal stack — pair with .end() to restore the parent set.
• Empty find result returns an empty jQuery object — safe to chain.

💡 Best Practices