jQuery closest() Method
jQuery
Traversing MethodsExample
Return the first ancestor of <span>, that is an <ul> element:
$("span").closest("ul").css({"color": "red", "border": "2px solid red"});
});
Result:
- ul (second ancestor - second grandparent)
- li (direct parent) span
- ul (first ancestor -
first grandparent)
Definition and Usage
The closest() method returns the first ancestor of the selected element.
An ancestor is a parent, grandparent, great-grandparent, and so on.
The DOM tree: This method traverse upwards from the current element, all the way up to the document's root element (<html>), to find the first ancestor of DOM elements.
This method is similar to parents(), in that they both traverse up the DOM tree. The differences are as follows:
closest()
- Begins with the current element
- Travels up the DOM tree and returns the first (single) ancestor that matches the passed expression
- The returned jQuery object contains zero or one element
parents()
- Begins with the parent element
- Travels up the DOM tree and returns all ancestors that matches the passed expression
- The returned jQuery object contains zero or more than one element
Other related methods:
- parent() - returns the direct parent element of the selected element
- parentsUntil() - returns all ancestor elements between two given arguments
Syntax
Return the first ancestor of the selected element:
Return the first ancestor using a DOM context to look up the DOM tree within:
| Parameter | Description |
|---|---|
| filter | Required. Specifies a selector expression, element or jQuery object to narrow down the ancestor search |
| context | Optional. A DOM element within which a matching element may be found |
Try it Yourself - Examples
Return
the first ancestor of <span>, that is a <span> element
Because this method begins with the current element, a search for the first
<span> of <span>, will return <span>.
Pass in a DOM element as the context within which to search for the first
ancestor element
Using both parameters to pass in a DOM element as the context within which to
search for the first <ul> element.
