JQuery Closest

we'll explore the closest() function in depth, including its syntax, working, and practical examples. In this artical we learn to jQuery closest function using to element border color change process use this sample syntax

JQuery closest()

jQuery's closest() function is used to find the closest ancestor element of a given element based on a specified selector. It searches through the ancestor elements of the given element until it finds an element that matches the selector. The function returns the closest matched element. JQuery closest() method is that return first parent or ancestor of selected element in the dom tree.

This method is also mention the particular id,class and element

  • Download Jquery Plugin or Use JQuery CDN Link
  • Make HTML Form
  • Add Jquery Library
  • Use jquery ready function
  • Define jQuery closest()
  • Finding Closest element
  • Finding Closest class name
  • Finding Closest id

Create new html file

    At first you have create new html file in your specific path . Then add jQuery plugin and define the jQuery closest function

Set JQuery Plugin 

Then, You add jQuery plugin in your file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

Define closest()

Then, use jQuery ready function and define the jQuery closest(). In this 

closest()


   $("a").closest("span");


JQuery closest function using class name


<script>
    $(document).ready(function(){
        $(".a_tag").closest(".red").css({"border": "2px solid blue"});
    });
</script>


JQuery closest function using ID 


<script>
    $(document).ready(function(){
        $("#a_tag").closest("#red").css({"border": "2px solid blue"});
    });
</script>

JQuery closest function using Element


<script>
    $(document).ready(function(){
        $("a").closest("span").css({"border": "2px solid blue"});
    });
</script>


Full Source Code 


<!DOCTYPE html>
<html>
<head>
<title>Jquery Closest</title>
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<style>
    .main_div
    {
        border: 2px solid #cbcbcb;
        padding: 20px;
    }
    .red
    {
        border: 2px solid #cbcbcb;
        padding: 12px;
    }
    .a_tag
    {
        border: 2px solid #cbcbcb;
        padding: 5px;
    }
</style>
<body>

<div id="main_div" class="main_div">
    <span id="red" class="red">
        <a id="a_tag" class="a_tag" >Some Text</a>
    </span>            
</div>

</body>

<script>
    $(document).ready(function(){
        $(".a_tag").closest(".red").css({"border": "2px solid blue"});
    });
</script>

</html>

Finally enter your project url in browser

Output

Without Closest() function

JQuery Closest

With Closest() function

Jquery closest

Conclusion

    We hope this guide has been helpful. If you have any questions or need further assistance, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.