Updated March 27, 2023
Introduction to JQuery closest
The important thing of the JQuery is the manipulation of the DOM (Document Object Model). JQuery has a lot of DOM methods which makes our work easy and it is very simple to use the methods. The JQuery closest() will help us to return the first ancestor (parent, grandparent, great- grandparent and so on) of the selected element. It traverses towards the DOM tree and it starts traverse from the current element to find the first ancestor. This is somewhat similar to the parents() but they are different in the way they traverse. In the parents() it traverses from the parent element.
Syntax:
In simple words, we can say that the closest() method helps us to search the matching element in the DOM tree. The closest() method syntax in the JQuery. It is an inbuilt method in the JQuery.
$(selector).closest (selector [ , context] )Parameters:
It contains two parameters.
- Selector: The selector should of string type and it is the mandatory field. In this, it will narrow down the ancestor search in the DOM tree and specifies the element.
- Context: This is of string type and it is the optional parameter.
Examples of JQuery closest
Given below are the examples of JQuery closest:
Example #1
This is a simple example of the closest() method. In this example, we can observe how the closest() method will work.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.main * {
display: block;
border: 2px solid blue;
color: blue;
padding: 5px;
margin: 25px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("span").closest("ul").css({"color": "green", "border": "2px solid green"});
});
</script>
</head>
<body class="main">body (great-great-grandparent)
<div style="width:800px;">div (great-grandparent)
<ul>ul (second ancestor)
<ul>ul (first ancestor)
<li>li (parent)
<span>span</span>
</li>
</ul>
</ul>
</div>
</body>
</html>Output:
- In this example, we have the list of elements by using the closest method in this it has found the ul (first ancestor) and color has changed to green as we have mentioned in the CSS. In the below image we can observe the color is green for the ul (first ancestor).
- We can see that it has returned the first ancestor of the selected element.
Example #2
This is an example of the closest() method.
Code:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(document).bind("click", function (e) {
$(e.target).closest("li").css("background-color","blue");
});
});
</script>
</head>
<body>
<div>
<p>Click on any name to see the result:</p>
<ul>
<li class = "top">Sai</li>
<li class = "top">Bharat</li>
<li class = "middle">Vanitha</li>
<li class = "middle">Sony</li>
<li class = "bottom">Anna purna</li>
<li class = "bottom">Vasavi</li>
</ul>
</div>
</body>
</html>Output:
- In this example, we have a list of names and we are using the CSS and closest() method. On clicking on the names the color will be changed to the blue color as we have mentioned in the code.
- We can observe before clicking on the names the output is shown below.
- After clicking on any or one of the names the output will be as shown in the below image.
- After clicking on all the names the output will be as shown in the below image.
Example #3
This is an example for the closest() method along with toggleClass() method.
Code:
<!doctype html>
<html>
<head>
<title>Example for the jQuery closest</title>
<style>
div {
display: block;
border: 4px solid red;
color: black;
padding: 5px;
margin: 25px;
width:600px;
}
span{
display: block;
border: 4px solid red;
color: black;
padding: 5px;
margin: 25px;
width:500px;
}
span.main {
background: blue;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<div>
<span><b>Vanitha</b></span>
<span><b>Purna</b></span>
<span><b>Vasavi</b></span>
</div>
<script>
$(document).on("click",function(event) {
$(event.target).closest("span").toggleClass("main");
});
</script>
</body>
</html>Output:
- In this example, we have div and span for the span we are applying the closest() and toggleClass() effect.
- For the span, we have provided the background color as blue. For the closest() method we have passed the span.
- So by clicking on the blocks the background color is changed to the blue color.
- The toggleClass() method can be toggled between the colors so by clicking on the buttons we can observe the change in the color.
- Before clicking on the blocks we can observe the output as shown below and the borders are red as mentioned in the code.
- In the below image we can observe after clicking on the blocks that the background color is changed to blue due to the closest() and toggleClass() method effects.
- In the below image we can observe by clicking on the blocks again the background color is changed.
Example #4
This is an example of the closest() method.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example for the JQuery closest</title>
<style>
li {
margin: 10px;
background: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li><label class="main">Closest</label></li>
</ul>
<script>
$(document).ready(function() {
$(".main").click(function() {
alert("The element is : " + $(this).closest("li").html());
})
})
</script>
</body>
</html>Output:
- This is a simple example of the closest() method. In this, we have provided the list with the margin and the background color and we have passed the list to the closest() method as a parameter.
- This method is passed to an alert message.
- We can see by running the code the output is displayed as shown below.
- By clicking on the closest text we can see that it will pop up the message which we have passed in the alert message i.e., The element is: <label class = “main”> Closest</label> as shown in the below image.
Conclusion
So by using the closest() method we can return the first ancestor of the specified element in the DOM tree and in this, it will traverse from the current element. It can return zero or one element for each element.
Recommended Articles
This is a guide to the JQuery closest. Here we discuss the introduction, parameters, and various examples of JQuery closest. You may also have a look at the following articles to learn more –
