How To Get Children Element In jQuery

Websolutionstuff | Jul-13-2022 | Categories : jQuery

In this article, we will see how to get the children of this selector in jquery. You can use the find() method to get the children of the $(this) selector using jquery. The find() method returns descendant elements of the selected element. This method traverse downwards along descendants of DOM elements.

So, let's see how to get children of this selector in jquery, how to find the child element in jquery, jquery get the child element by class.

Example: How to Get the Children of the $(this) Selector in jQuery

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select the Child Element Inside Div On Click - Websolutionstuff</title>
<style>
    .box{
        padding: 80px;
        border: 6px solid #999;
        text-align: center;
    }  
    .box img{
        width: 400px;
        border: 3px 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", "red");
    });
});
</script>
</head>
<body>
    <div class="box">
        <img src="images/laravel.jpg" alt="Laravel">
    </div>
</body>
</html>

 


You might also like:

Recommended Post
Featured Post
How to Add Active Class Dynamically in Laravel 11
How to Add Active Class Dynami...

Hello, laravel web developers! In this article, we'll see how to add an active class dynamically in laravel 11. Here...

Read More

Jul-08-2024

Jquery Search Filter Example
Jquery Search Filter Example

In this small post i will so you jquery search filter example. here we will see how to search data using jquery filter....

Read More

Aug-25-2021

How To Send Email using Node.js
How To Send Email using Node.j...

Hello Friends, In this tutorial we will learn how to send email using node.js app. In this tutorial we will see send...

Read More

Jul-28-2021

Multi Step Form Wizard jQuery Validation
Multi Step Form Wizard jQuery...

In this article, we will see multi step form wizard jquery validation. Here, we will learn jquery validation for mu...

Read More

Jan-30-2023