How to use jQuery.closest() method with class selector?

jQuery Web Development Front End Technology

The closest() method begins with the current element and returns only the first ancestors matching the passed expression. This returned jQuery object has zero or one element. Using the class selector is easy and let us see how to use it below.

Example

You can try to run the following code to learn how to use jQuery.closest() method with class selector:

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
.myclass * {
    display: block;
    border: 2px solid blue;
    color: red;
    padding: 5px;
    margin:10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("span").closest(".one").css({"color": "maroon", "border": "5px solid maroon"});
  });
</script>
</head>

<body class="myclass">body
  <div style="width:500px;">div
    <ol>ol - This is the third ancestor
    <ol>ol - This is the second ancestor
      <li>li - This is the direct parent element
        <span>demo</span>
        <span class="one">demo - using class selector with closest() method</span>
      </li>
    </ol>
    </ol>  
  </div>
</body>

Amit D

Published on 16-Dec-2017 10:52:48

Previous Page Print Page