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

  276 views   6 months ago jQuery

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.

<!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-1.12.4.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>

 

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com

Related Articles