Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the children of the $(this) selector in jQuery?
To get the children of the $(this) selector, use the jQuery find() method. The $(this) selector refers to the current element that triggered an event, and the find() method searches for descendant elements within that current element.
Example
You can try to run the following code to get the children of the $(this) selector −
<html>
<head>
<title>jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#mydiv').click(function(){
alert($(this).find('img:last-child').attr('src'));
});
});
</script>
<style>
#mydiv {
width: 400px;
height: 200px;
background-color: lightblue;
padding: 10px;
cursor: pointer;
}
#mydiv img {
margin: 5px;
}
</style>
</head>
<body>
<p>Click on the div below to get the source of the last image:</p>
<div id="mydiv">
<img src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" width="150" height="100" alt="Tutorials Library">
<img src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" width="150" height="100" alt="Video Tutorials">
</div>
</body>
</html>
In this example, when you click on the div with id mydiv, the $(this) selector refers to that clicked div element. The find('img:last-child') method searches within that div and finds the last image element, then displays its source URL in an alert box.
The find() method is the most effective way to get children elements of the current $(this) selector in jQuery, allowing you to search for specific descendant elements using CSS selectors.
188 Views
