How to Get the Children of the $(this) Selector in jQuery
Topic: JavaScript / jQueryPrev|Next
Answer: Use the jQuery find() Method
You can use the find() method to get the children of the $(this) selector using jQuery.
The jQuery code in the following example will simply select the child <img> element and apply some CSS style on it on click of the parent <div> element.
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select the Child Element Inside a DIV On Click</title>
<style>
.box{
padding: 80px;
border: 10px solid #999;
text-align: center;
}
.box img{
width: 400px;
border: 6px solid #999;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".box").click(function(){
$(this).find("img").css("border-color", "blue");
});
});
</script>
</head>
<body>
<div class="box">
<img src="images/sky.jpg" alt="Cloudy Sky">
</div>
</body>
</html>If you want to get only direct descendants of the target element, you can also use the children() method. The children() method only travels a single level down the DOM tree whereas the find() can traverse down multiple levels to select descendant elements (grandchildren, etc.).
Related FAQ
Here are some more FAQ related to this topic:
