jQuery – find(selector) Method

In this post, I will show you what is find() method in jQuery with example.

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

A descendant is a child, grandchild, great-grandchild, and so on.

The DOM tree: This method traverse downwards along descendants of DOM elements, all the way down to the last descendant. To only traverse a single level down the DOM tree (to return direct children), use the children() method.

Note: The filter parameter is required for the find() method, unlike the rest of the tree traversal methods.

Tip: To return all of the descendant elements, use the “*” selector.


Here is the simple syntax to use this method −

selector.find( selector )
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
      <li class="item-c">C</li>
  <li class="item-iii">III</li>

If we begin at item II, we can find list items within it:

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

The result of this call is a red background on items A, B, 1, 2, 3, and C. Even though item II matches the selector expression, it is not included in the results; only descendants are considered candidates for the match.

Unlike most of the tree traversal methods, the selector expression is required in a call to .find(). If we need to retrieve all of the descendant elements, we can pass in the universal selector '*' to accomplish this.

Selector context is implemented with the .find() method; therefore, $( "li.item-ii" ).find( "li" ) is equivalent to $( "li", "li.item-ii" ).


<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>find demo</title>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
$( "p" ).find( "span" ).css( "color", "red" );


Hello, how are you?
Me? I’m good.

0 0 votes
Article Rating

Do you want to hire us for your Project Work? Then Contact US.
Spread the love
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x