jQuery find()

Introduction

Return all <span> elements that are descendants of <ul>:

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {//w w  w  .j  av a2  s  . co  m
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("ul").find("span").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>

<body class="ancestors">body (great-grandparent)
  <div style="width:500px;">div (grandparent)
    <ul>ul (direct parent)
      <li>li (child)
        <span>span (grandchild)</span>
      </li>
    </ul>
  </div>
</body>

</html>

The find() method returns descendant elements of the selected element.

To return all of the descendant elements, use the "*" selector.

$(selector).find(filter)

Parameter	Optional	Description
filter	Required.	A selector expression, element or jQuery object to filter To return multiple descendants, separate each expression with a comma.

Previous Next