jQuery Traversal - closest() Method
Example
This example demonstrates how to perform event delegation using closest(). When the closest list element or its child descendants are clicked, the yellow background will be toggled:
$( document ).bind("click", function( e ) {
$( e.target ).closest("li").toggleClass("hilight");
});
Definition and Usage
The closest() method retrieves the first ancestor element that matches the selector, starting from the current element up the DOM tree.
Syntax
.closest(selector)
| Parameter | Description |
|---|---|
| selector | String value, containing the selector expression that matches the element. |
Detailed Description
If a jQuery object representing a set of DOM elements is given, the .closest() method allows us to retrieve these elements in the DOM tree and their ancestor elements, and construct a new jQuery object using the matching elements..parents() Similar to .closest(), both traverse up the DOM tree. Although the difference between them is subtle, it is important:
| .closest() | .parents() |
|---|---|
| Starting from the current element | Starting from the parent element |
| Traverse up the DOM tree until a match is found for the applied selector. | Traverse up the DOM tree until the root element of the document, adding each ancestor element to a temporary collection; if a selector is applied, the collection will be filtered based on that selector. |
| Returns a jQuery object containing zero or one element | Returns a jQuery object containing zero, one, or multiple elements |
Please see the following HTML snippet:
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
Example 1
Assuming we perform a search for the <ul> element starting from item A:
$('li.item-a').closest('ul').css('background-color', 'red');
This will change the color of the level-2 <ul>, because it is the first element encountered when traversing up the DOM tree.
Example 2
Assuming we are searching for the <li> element:
$('li.item-a').closest('li').css('background-color', 'red');
This will change the color of list item A. Before traversing up the DOM tree, the .closest() method starts searching from the li element itself and continues until it matches item A.
Example 3
We can pass a DOM element as context to search for the closest element within it.
var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');
The above code will change the color of the level-2 <ul> because it is both the first <ul> ancestor of list item A and also a descendant of list item II. It will not change the color of the level-1 <ul> because it is not a descendant of list item II.
