Friday , April 28 2017
Home / jquery / JQuery Closest Example Tutorial

JQuery Closest Example Tutorial

JQuery Closest :

JQuery Closest is a method, which is used to get the first ancestor of the selected element. Here Ancestor is a parent or grand parent or great grand parent and so on..

Closest in JQuery available in two flavours;

  • closest(filter)
  • closest(selector,[context])

closest(filter) :

It returns the closest (first) parent of the given element. Here filter is selector expression, it is required.

closest( selector, [context] )

In this method, a DOM element is used to match the elements.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>closest demo</title>
<style>
li {
    margin: 5px;
    padding: 5px;
    background: yellow;
}

</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <ul>
        <li><label class="sample">clickme For Closest</label></li>
        <li>You can also <b class="sample">Click me For Closest !</b></li>
    </ul>

    <script>
        $(document).ready(function() {
            $(".sample").click(function() {
                alert("My Closest Element is : " + $(this).closest("li").html());
            })
        })
    </script>
</body>
</html>

 

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

jQuery Add Elements Example Tutorials

In JQuery, we can easyly add HTML elements at run time. In this tutorials we …

Leave a Reply

Your email address will not be published. Required fields are marked *