jQuery find() Method

The find() method in jQuery is used to search and return the descendant elements of the selected element.

The word "descendant" means to move in a downward direction. For example, In a family chain, "child" is a descendant of "parent" and he/she is a descendant of "Grandparent" and so on.

This method allows you to navigate through the descendants of DOM elements, reaching all the way down to the last descendant.

Syntax

Following is ths syntax of find() method in jQuery −

$(selector).find(filter)

Parameters

This method takes the following parameter −

filter: A selector expression, element or jQuery object to filter the search for descendants.

Note: If we want to return multiple descendants, we can seperate each expression with comma(,).

Example 1

In the following example, we are using the find() method to return all the <span> elements that are descendants of <div> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .descendants * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script>
$(document).ready(function(){
  $('div').find('span').css({"color": "red", "border": "1px solid red"});
});
</script>
</head>
<body class="descendants">
<div id="container">Great-Grandparent
  <ul>Grandparent
    <li>Parent
      <span>Child</span>
    </li>
  </ul>
</div>
</body>
</html>

when we execute the above program, the <span> elements that are descendants of <div> element will have red color and red border to them.

Example 2

We can use the "*" selector to return all descendant elements of an element

In this example, we are using the "*" selector to return all the elements that are descendants of <ul> −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .descendants * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script>
$(document).ready(function(){
  $('ul').find('*').css({"color": "red", "border": "1px solid red"});
});
</script>
</head>
<body class="descendants">
<div id="container">Great-Grandparent
  <ul>Grandparent
    <li>Parent
      <span>Child</span>
    </li>
  </ul>
</div>
</body>
</html>

When we execute the above program, all the elements (<li>, and <span>) that are descendants of <div> will be returned.

Example 3

We can separate each expression with a comma (,) to return multiple descendants.

In this example, we are returning multiple descendants of <div> element −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .descendants * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script>
$(document).ready(function(){
  $('div').find('ul, li, span').css({"color": "red", "border": "1px solid red"});
});
</script>
</head>
<body class="descendants">
<div id="container">Great-Grandparent
  <ul>Grandparent
    <li>Parent
      <span>Child</span>
    </li>
  </ul>
</div>
</body>
</html>

When we execute the above program, multiple elements (<ul>, <li>, and <span>) that are descendants of <div> will be returned.

jquery_ref_traversing.htm

Print Page