jQuery find closest element; In this tutorial, you will learn how to get or find the first ancestor or closets elements of selected HTML elements (div, span, button, paragraph, textarea, tag etc) by class, id, tag.
jQuery closest() Method
The closest () method of jQuery gives the first ancestor of the selected HTML element.
The closest method of JQuery accepts a mandatory parameter, which is used to filters the traversal. This method is starts traversal by find at the current element, it will return the current html element if it matches the specified expression, it will expand the DOM tree unless it detects an element that matches the filter.
Syntax closest() Method
$("selector").closest(first)
This returns the first ancestor of the selected HTML element.
$(selector).closest(first,second)
It returns the first ancestor using the DOM reference to use the DOM tree.
Parameters
- First :- It is required. A selector specifies expression, element, or jquery object to reduce the search of ancestors.
- Second :- It is optional. A DOM element within which a matching element may be found.
Example of jquery find/get closest element by tag
This example will demostrate you how use closest method to selected html elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery closest method</title>
<style>
.tuts {
margin: 10px;
background: grey;
}
li.lightcss {
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul>
<li class="tuts"><b>Click me!</b></li>
<li class="tuts">You can also <b>Click me!</b></li>
</ul>
<script>
$( document ).on( "click", function( event ) {
$( event.target ).closest( "li" ).toggleClass( "lightcss" );
});
</script>
</body>
</html>
Demo of jquery find/get closest element by tag
- Click me!
- You can also Click me!
In the above example of the closest () method, you will click on the elements and the background color of this element will change. We also use the jquery toggleClass () method along this method.
Recommended jQuery Tutorials
- To Find Siblings Elements Using jQuery sibling methods
- jQuery | Event MouseUp By Example
- Event jQuery Mouseleave By Example
- jQuery Event Mouseenter Example
- Event jQuery MouseOver & MouseOut By Example
- keyup jquery event example
- Jquery Click Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
- To Remove whitespace From String using jQuery
- jQuery Ajax Post Method Example
- jQuery Ajax Get Method Example
- To Load/Render html Page in div Using jQuery Ajax $.load
