The **jQuery `find()` method** returns the descendant elements of a selected element.

> A **descendant** is a child, grandchild, great-grandchild, etc.

Given a jQuery object, the `find()` method allows the user to search through the descendants of these elements (in the DOM tree)​, ​and construct a new jQuery object from the matching elements.

# Syntax
Below is the syntax used to select all descendants of a *selector* and filter them using `find()`:
```css
$(selector).find(filter)
```

# Code
The following example is a basic implementation of using the `find()` method to select all descendants of the `ul` element. The code selects and changes the styling of the selected elements to highlight them:

<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>
    <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <p>Paragraph Text</p>
        <li>Fourth</li>
    </ul>
    <p>Paragraph Text</p>
    <li> List outside ul tag </li>

    <script>
    $( "ul" ).find("li").css( "color", "red" );
    $( "ul" ).find("p").css( "color", "blue" );
    </script>

  </body>
</html>


// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

What is the jQuery find() method?

Returns descendant elements of a selected element, enabling searches and new jQuery object creation.