jQuery closest

jQuery closest
Techiio-author
Written by Sagar RabidasDecember 9, 2021
6 min read
jQuery
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Techiio-author
Sagar Rabidas

Software Developer

In this blog, we will Introduction to jQuery closest.

jQuery:-

jQuery is a small, lightweight, and fast JavaScript library. It is cross-platform and supports different types of browsers. It is also referred to as? write less do more? because it takes a lot of common tasks that require many lines of JavaScript code to accomplish and binds them into methods that can be called with a single line of code whenever needed. It is also very useful to simplify a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

jQuery is a fast, small, cross-platform, and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML. It makes things like HTML document traversal and manipulation, animation, event handling, and AJAX very simple with an easy-to-use API that works on a lot of different types of browsers.

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 jQuery.

$(selector).closest (selector [ , context] )

Parameters:

It contains two parameters.

Selector: The selector should be of string type and it is the mandatory field. In this, it will narrow down the ancestor search in the DOM tree and specify 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>

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>

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>

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>

jQuery
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Was this blog helpful?
techiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plan
You must be Logged in to comment
Code Block
Techiio-author
Sagar Rabidas
Software Developer
Techiio-followerTechiio-followerTechiio-followerTechiio-followerTechiio-follower
+9 more
300 Blog Posts
14 Discussion Threads
Trending Technologies
15
Software40
DevOps48
Frontend Development24
Backend Development20
Server Administration17
Linux Administration26
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance