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 Change Date Format in Laravel 11
How to Change Date Format in L...

Hello developers! In this article, we'll see how to change the date format in laravel 11. Here, we'll learn...

Read More

Apr-29-2024

Laravel 9 Livewire Datatable Example
Laravel 9 Livewire Datatable E...

In this article, we will see the laravel 9 livewire datatable example. Here, we will learn how to use livewire data...

Read More

Nov-30-2022

How to Install Node JS and NPM on Ubuntu 22.04
How to Install Node JS and NPM...

Hey fellow Ubuntu enthusiasts! 🐧✨ If you're looking to step into the awesome world of Node.js and npm for your web d...

Read More

Jan-12-2024

Laravel Signature Pad Example
Laravel Signature Pad Example

In this article, we will learn about the laravel signature pad example. we will perform a digital signature pad in larav...

Read More

Feb-03-2021