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 Create User Roles And Permissions In Laravel 10
How To Create User Roles And P...

In this article, we will see how to create user roles and permissions in laravel 10. Here, we will learn about roles and...

Read More

Apr-03-2023

Carbon Add Minutes To Date In Laravel 9
Carbon Add Minutes To Date In...

In this article, we'll explore how to add minutes to a date in Laravel 8, Laravel 9 and Laravel 10 using Carbon...

Read More

Nov-23-2022

Laravel 9 AJAX CRUD Example
Laravel 9 AJAX CRUD Example

In this post, we will learn how to create ajax crud operations in laravel 9. here, we will perform laravel 9 ajax c...

Read More

Feb-11-2022

How To Create Stacked Bar Chart In Laravel 9 Using Highcharts
How To Create Stacked Bar Char...

In this article, we will see how to create a dynamic stacked bar chart in laravel 9 using highchart. Here, we will...

Read More

Dec-30-2022