jQuery .find() Method

Beginner
6 min read
Updated: Oct 2026
5 examples
Live preview
Definition

What Is .find()?

.find() gets the descendants of each element in the current set, filtered by a selector, jQuery object, or DOM element. It searches the whole subtree — not just one level. Selector form since jQuery 1.0; element/jQuery argument since 1.6.

Remember
$("li.item-ii").find("li")     → nested li only (not item-ii)
$("p").find("span")            → spans inside paragraphs
$("div").find("*")             → all element descendants

.find()     → any depth down
.children() → direct children only
.filter()   → narrow current set (no drill-down)

// context shorthand (official):
$("li.item-ii").find("li")  ===  $("li", "li.item-ii")
NeedPrefer
Any-depth descendants$("root").find("sel")
Direct children only$("root").children("sel")
Narrow current set$("set").filter("sel")
Approach

How to Use .find()

Start from a parent set, then search inside for matching descendants.

  1. Select the container(s): $("li.item-ii"), $("#card"), and so on.
  2. Call .find(selector) — the selector is required.
  3. Remember: the starting element is never included.
  4. Use "*" when you need every descendant element.
PieceRequired?Role
Starting setYesRoots whose subtrees are searched
Selector / element / jQueryYesFilter for matching descendants
Depth—All levels (unlike .children())

Pseudocode

Pseudocode
roots = current jQuery set
result = empty

for each root in roots:
    for each descendant of root (any depth):
        if descendant matches selector:
            keep descendant

return jQuery(result)   // new set; roots not included
Reference

Cheat Sheet

Keep these facts handy while searching descendants.

TopicDetail
Syntax.find(selector | element | jQuery)
DirectionDown the tree (all depths)
Includes self?No — descendants only
vs .children()Any depth vs one level
vs .filter()Drill in vs narrow current set
All descendants.find("*")
Since1.0 (selector); 1.6 (element/jQuery)
Try it

Live Preview

Run finds on the official-style nested list starting at item II.

Start: li.item-ii. .find("li") matches A, B, 1, 2, 3, C — not II itself.

Result
$("li.item-ii").find("li")
matched: 6
text: A, B, 1, 2, 3, C

/* descendants only — II excluded */
Code

jQuery Examples

Short, copy-ready snippets. Open a browser console with jQuery loaded, or use Try It Yourself for a live editor.

Example 1 — Official Nested List: .find("li")

Find every nested list item under item II (jQuery API example).

jQuery
var $hits = $("li.item-ii").find("li");
console.log($hits.length);
console.log($hits.map(function () {
  return this.firstChild.textContent.trim();
}).get().join(", "));
Try It Yourself

How It Works

  1. Start at II. $("li.item-ii") is the root.
  2. Search descendants. .find("li") walks the whole subtree.
  3. Skip the root. II matches li but is not a descendant of itself.
  4. Deep matches too. Items 1, 2, 3 under B are included.

Example 2 — Official: $("p").find("span")

Same idea as the descendant selector $("p span").

jQuery
var $a = $("p").find("span");
var $b = $("p span");

console.log("find →", $a.map(function () {
  return this.textContent.trim();
}).get().join(", "));
console.log("same size:", $a.length === $b.length);
Try It Yourself

How It Works

  1. Start with paragraphs. $("p") is the root set.
  2. Find nested spans. Only spans inside those p tags match.
  3. Same as p span. Official docs call this out.
  4. See also. Descendant selector for the CSS form.

Example 3 — .find() vs .children()

Any depth vs one level — nested spans under a box.

jQuery
var $box = $("#box");
console.log("find:", $box.find("span").map(function () {
  return this.textContent.trim();
}).get().join(", "));
console.log("children:", $box.children("span").map(function () {
  return this.textContent.trim();
}).get().join(", "));
Try It Yourself

How It Works

  1. .find("span"). Matches the direct span and the nested one.
  2. .children("span"). Only the span that is a direct child of #box.
  3. Depth is the difference. Official docs: .children() travels one level only.
  4. Pick carefully. See .children() for one-level needs.

Example 4 — Pass a jQuery Collection (1.6+)

Keep only members of a collection that are descendants of the root.

jQuery
var $allLi = $("li");
var $inside = $("li.item-ii").find($allLi);

console.log("all li:", $allLi.length);
console.log("inside II:", $inside.map(function () {
  return this.firstChild.textContent.trim();
}).get().join(", "));
Try It Yourself

How It Works

  1. Build a pool. $("li") grabs every list item on the page.
  2. Intersect with subtree. .find($allLi) keeps only descendants of II.
  3. Drop outsiders. I, II, and III are not returned.
  4. Same idea with an element. You can pass a raw DOM node too (1.6+).

Example 5 — All Descendants with .find("*")

Selector is required — use "*" for every element descendant.

jQuery
var $root = $("#card");
var $all = $root.find("*");

console.log("count:", $all.length);
console.log("tags:", $all.map(function () {
  return this.tagName.toLowerCase();
}).get().join(", "));
Try It Yourself

How It Works

  1. Required argument. Official docs: pass "*" for all descendants.
  2. Every element tag. Headings, paragraphs, spans, and so on.
  3. Not the root. #card itself is excluded.
  4. Text nodes skipped. "*" matches elements only.

Edge Cases & Pitfalls

Check these before relying on .find() in real projects.

self

Starting element excluded

Even if the root matches the selector, it is not returned — only descendants are.

required

Selector is required

Unlike some tree methods, omit the argument and .find() will not work. Use "*" for everything.

depth

Not the same as .children()

Need only direct children? Use .children() — .find() can over-match deep nodes.

scope

Selector parts must lie inside

Official docs: all parts of the selector must match inside the element on which .find() is called.

Compatibility

Browser Support

.find() is a core jQuery traversing method — selector form since 1.0, element/jQuery argument since 1.6. It works wherever jQuery runs.

✓ jQuery 1.0+ · Core API

jQuery .find()

Works in all browsers with jQuery. Prefer a tight root set, then find — same idea as context selectors.

100% jQuery environments
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
.find() Core method

Bottom line: Safe to use for descendant searches; pass "*" when you need every element under a root.

Analysis

Performance Notes

ApproachCostBest for
$("#id").find("sel")Small scoped searchTypical UI work
$("div").find("sel")Many roots × subtreesAvoid on huge pages
$("#id").children("sel")One level onlyWhen depth is not needed

Start from the smallest reliable root (often an id), then .find(). Prefer .children() when you only need the next level.

Remember

Key Takeaways

  • Role: search all descendants under the current set.
  • Not self: the starting element is never included.
  • vs children: any depth vs one level — see .children().
  • Required arg: use .find("*") for every element descendant.

One line: .find() means “search inside, any depth” — the root itself stays out of the result.

Frequently Asked Questions

.find() searches through all descendants of each element in the current jQuery set and returns a new jQuery object of matching nodes. Available since 1.0 (selector); element/jQuery argument since 1.6.
.children() travels only one level down (direct children). .find() searches every depth — grandchildren and deeper. Official docs: they are similar except for how far down they go.
.find() drills into descendants and can return nodes that were not in the original set. .filter() only narrows the current set — it never adds deeper nodes.
Yes. Unlike many traversing methods, .find() requires an argument. Pass "*" to get every descendant element at any depth.
No. Only descendants are candidates. $("li.item-ii").find("li") does not include item II itself — only nested li elements inside it.
Yes for the common case. Official docs: $("li.item-ii").find("li") is equivalent to $("li", "li.item-ii").

Next: .first() Method

Reduce a matched set to its first element.

.first() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

jQuery .filter() Method jQuery .first() Method