LaravelCode

Search

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

jQuery
2260 views 4 years ago
post-title

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>

 

Random Articles
  • How to check if variable is string in PHP
    PHP is simple programming method by which you can use so many in-built functions to give easy coding. In this article, I will show you how to check if given variable is string or not. There is func...
  • How to Capture Browser Window Resize Event in JavaScript
    Use the&nbsp;addEventListener()&nbsp;Method You can simply use the&nbsp;addEventListener()&nbsp;method to register an event handler to listen for the browser window&nbsp;resize&nbsp;event, such as&...
  • ReactJs File uploading Example with Axios
    This tutorial will provide an example of react js file upload component. you can understand the concept of react js file upload to server. you can optically discern react js upload a file. This post w...
  • How to Make Async Requests in PHP
    While creating HTTP request to other websites, &nbsp;sometimes we don&#39;t need to get response from the server. In this case we have to just send the HTTP request and should drop the connection, so...
  • How to get the Client IP Address in PHP
    When working in one of my project, I wanted to get client devices&#39; IP Address. So I search on how to accurately get client IP address. If your project is in Laravel framework, Laravel&#39;s \Re...
Advertise