Query find() Method

The find() method searches inside a selected element for matching descendants. It looks through all levels of nested children — children, grandchildren, great-grandchildren — and returns every match.

Basic Syntax

$(parent).find(selector)

// selector can be: tag, class, id, attribute, or any valid jQuery selector

find() vs children()

These two methods are often confused. The key difference is depth.

children() → looks ONE level deep (direct children only)
find()     → looks ALL levels deep (all descendants)

Diagram: find() vs children()

  <div id="container">             ← selected element
    <ul>                           ← direct child (level 1)
      <li>Item 1</li>             ← grandchild (level 2)
      <li><span>Item 2</span></li> ← grandchild (level 2), span at level 3
    </ul>
  </div>

  $("#container").children("li")  → finds nothing (li is not a direct child)
  $("#container").find("li")      → finds both <li> elements ✓
  $("#container").find("span")    → finds the <span> too ✓

Basic Examples

// Find all paragraphs inside #article
$("#article").find("p").css("line-height", "1.8");

// Find all inputs inside a form
$("form#signup").find("input").css("border", "1px solid #ccc");

// Find elements by class inside a container
$(".card-grid").find(".featured").addClass("highlight");

find() Inside a Table

HTML:
<table id="dataTable">
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>92</td></tr>
    <tr><td>Bob</td><td>78</td></tr>
  </tbody>
</table>

jQuery:
// Style only body cells, not header cells
$("#dataTable").find("tbody td").css("text-align", "center");

// Find all th elements inside the table
$("#dataTable").find("th").css("background", "#003580").css("color", "#fff");

find() with Complex Selectors

// Find checked checkboxes inside a specific form
$("#settingsForm").find("input[type='checkbox']:checked")

// Find all empty list items inside a nav
$("nav").find("li:empty")

// Find first paragraph with class "intro" inside main content
$(".main-content").find("p.intro:first")

find() with Event Delegation Pattern

$(document).ready(function() {
    $(".product-card").find(".add-to-cart").click(function() {
        var productName = $(this).closest(".product-card").find(".product-title").text();
        alert(productName + " added to cart!");
    });
});

Diagram: Nested find() Usage

  <div class="product-card">
    <h3 class="product-title">Wireless Mouse</h3>   ← find(".product-title")
    <p class="price">₹799</p>
    <button class="add-to-cart">Add</button>         ← find(".add-to-cart")
  </div>

  Click "Add" → find .product-title inside the same card → get "Wireless Mouse"

find() Returns a New jQuery Object

The result of find() is a new jQuery object containing only the found descendants. You can chain methods on it just like any jQuery selection.

$("#wrapper")
    .find("p")
    .css("color", "navy")
    .addClass("formatted")
    .show();

find("*") — Find All Descendants

var count = $("#container").find("*").length;
console.log("Total nested elements: " + count);

Performance Tip

Using find() on a specific parent is faster than selecting globally. It limits the search to a smaller section of the DOM.

// Slower — searches the entire page
$(".btn-primary")

// Faster — searches only inside #sidebar
$("#sidebar").find(".btn-primary")

Quick Summary

• find(selector) searches all descendant levels inside the selected element.
• Unlike children(), it goes beyond direct children to all nested levels.
• Use complex selectors inside find() for precise results.
• Scoping a search with find() on a parent element improves performance.
• The returned jQuery object supports full method chaining.

find() with Event Handlers

After finding descendants, you can immediately attach events. This keeps code scoped to a specific container rather than attaching globally.

$(document).ready(function() {
    // All expand buttons inside article cards
    $(".article-card").find(".expand-btn").click(function() {
        $(this).closest(".article-card").find(".article-body").slideToggle();
    });
});

The click on any expand button reveals only the body of its own card — not every card on the page.

Chaining find() Across Multiple Levels

// Find a section, then inside it find a list, then find list items
$("section#reviews")
    .find("ul.review-list")
    .find("li.verified")
    .css("border-left", "4px solid green");

Each chained find() scopes the search into the result of the previous one — drilling deeper without losing context.