jQuery closest( selector ) Method

« Previous Chapter Next Chapter »

Description:

The closest( selector ) method works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn't match then it will continue to traverse up the document, parent by parent, until an element is found that matches the specified expression. If no matching element is found then none will be returned.

Syntax:

Here is the simple syntax to use this method:

Example

selector.children( [selector] )
                                        

Parameters:

Here is the description of all the parameters used by this method:

  • selector: This is the selector to be used to filter the elements.

Example:

Example

<html>
<head>
   <script type="text/javascript"  src="../../js/jquery-2.2.0.js"></script>
 <script>
  $(document).ready(function(){
    $(document).bind("click", function (e) {
      $(e.target).closest("li").toggleClass("highlight");
    });
  });
  </script>
  <style>
  .highlight { color:red; 
          background: yellow;
        }
  </style>
</head>
<body>
   <div>
   <p>Click any item below to see the Output:</p>
   <ul>
     <li class="top">list item 1</li>
     <li class="top">list item 2</li>
     <li class="middle">list item 3</li>
     <li class="middle">list item 4</li>
     <li class="bottom">list item 5</li>
     <li class="bottom">list item 6</li>
   </ul>
   </div>
</body>
</html>
                                        
Code It Online

« Previous Chapter Next Chapter »

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!