jQuery .find(): Select Matching Descendants

jQuery Reference

.find() searches the descendants of the currently selected elements. It searches through multiple nesting levels, but does not include the selected elements themselves.

Syntax and behavior

$("#panel").find(".item");
$("#panel").find("*");

Descendants include direct children and elements nested further below them. You can pass a selector, DOM element, or jQuery object. The selector form needs an argument; use "*" to find every descendant element. Use .children() for one level only and .filter() to narrow the current selection itself. A descendant selector such as $("#panel .item") can express the same search scope.

The official jQuery .find() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery find example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="panel" class="item">
  <p class="item" id="a">Direct child</p>
  <div><p class="item" id="b">Nested descendant</p></div>
</div>
<p class="item" id="c">Outside the panel</p>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      const $items = $("#panel").find(".item");
      $items.addClass("marked");
      $("#output").text($items.map(function () { return this.id; }).get().join(", "));
    });
  </script>
</body>
</html>

Expected result

Only a and b are highlighted, and the output reads a, b. The panel itself and the outside paragraph c are excluded. Changing the argument to "*" also selects the nested div.

Important details and troubleshooting

Even if the container has the requested class, .find() excludes it. Use .addBack() or combine another selection when the container should also be included.
Elements that have not been created yet cannot be found. Query again after adding content, or use event delegation for handlers on future descendants.
If the result is empty, check the parent selection’s .length first. This separates an incorrect container selector from a descendant condition that does not match.

Compare the behavior with .addBack() and the traversal stack, .has() containing-element selection.

jQuery Reference

jQuery .add(): Combine Element Selections

Combine selections without changing the original collection, and distinguish selecting elements from inserting them into the document.

jQuery .after(): Insert Content as the Next Sibling

Insert or move content immediately after a target, and compare after with inside insertion and insertAfter syntax.

jQuery .prepend(): Insert Content as the First Child

Add content at the beginning of an element and understand how existing nodes and multiple destinations affect the result.

jQuery :button Selector: Which Elements Does It Match?

Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.

jQuery .removeClass(): Remove Specific or All Classes

Remove selected class names or clear all classes, while distinguishing class removal from clearing inline styles.

jQuery .addBack(): Include the Previous Traversal Selection

Include the previous traversal collection and understand which elements the optional selector filters.

jQuery :contains(): Match Elements by Text Content

Explore case-sensitive substring matching, descendant text, and a safer way to handle dynamic search strings without constructing selectors.

jQuery .addClass(): Add One or More CSS Classes

Add one or more classes while preserving existing names, generate classes with a callback, and check why styling may not change.

jQuery .before(): Insert Content as the Previous Sibling

Insert or move content immediately before a target, and compare before with inside insertion and insertBefore syntax.

jQuery .removeAttr(): Delete HTML Attributes

Compare deleting an attribute with setting an empty value, and handle input values, current properties, and ARIA attributes correctly.