jQuery find() method

The find() method in jQuery finds the descendant elements of the given selector. A descendant can be a child, grandchild, and so on. It is an inbuilt method in jQuery. For searching the descendant, the find() method traverse downwards from the selected element in the DOM tree.

We can use the "*" selector for returning all descendant elements. To return all descendant elements of the given selector, we have to write it as follows.

This children() method works similarly to the find() method. Unlike the find() method, the children() method traverse a single level down the DOM tree, i.e., it returns the direct children.

The syntax of using the find() method is given as follows:

Syntax

This method requires a single parameter value that is filter. This value can be a selector expression, an element or a jQuery object. It filters the search for descendants.

Let's understand the find() method using some illustrations.

Example1

In this example, there are two div elements along with two ul elements, a heading h2, and a paragraph element.

Here, we are finding the ul descendants of the div element with id = "div1". The find() method will return the ul elements that are descendants of the corresponding div element. It will continue the searching until it finds the specified element.

We have to click the given button to get the ul descendant of the div element.

If we use the children() method, it will return the direct children of the specified selector.

<!DOCTYPE html>
<html>
<head>
<style>
.main * { 
  display: block;
  font-size: 20px;
  position: relative;
  border: 2px solid black;
  color: black; 
  padding: 10px;
  margin: 17px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
  $("#div1").find("ul").css({ "font-size": "30px", "color": "blue", "border": "6px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
  <div id = "div1"> div1
  <div> div2
    <ul> ul 
      <h2> Heading h2
	  <ul> ul
          <p> Paragraph element </p>
		  </ul>
    </h2>   
	</ul>
	</div>
  </div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we are returning multiple descendants of the given selector. Here, we are separating each expression by a comma to return the multiple descendants.

<!DOCTYPE html>
<html>
<head>
<style>
.main * { 
  display: block;
  font-size: 20px;
  position: relative;
  border: 2px solid black;
  color: black; 
  padding: 10px;
  margin: 17px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
  $("#div1").find("div,ul,p").css({"color": "blue", "border": "6px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
  <div id = "div1"> div1
  <div> div2
    <ul> ul 
      <h2> Heading h2
	  <ul> ul
          <p> Paragraph element </p>
		  </ul>
    </h2>   
	</ul>
	</div>
  </div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example3

In this example, we are finding all descendant of the div element with id = "div1". Here, we are using the "*" selector for returning all descendant elements.

<!DOCTYPE html>
<html>
<head>
<style>
.main * { 
  display: block;
  font-size: 20px;
  position: relative;
  border: 2px solid black;
  color: black; 
  padding: 10px;
  margin: 17px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
  $("#div1").find("*").css({"color": "blue", "border": "6px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
  <div id = "div1"> div1
  <div> div2

      <h2> Heading h2
          <p> Paragraph element </p>
    </h2>   
	</div>
  </div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -