jQuery parents() Method
jQuery Traversing Methods : Return all ancestor elements of <span>
Definition and Usage
The parents() method returns all ancestor elements of the selected element.
An ancestor is a parent, grandparent, great-grandparent, and so on.
The DOM tree: This method traverse upwards from the parent
element along ancestors of DOM elements, all the way up to the document's root
element (<html>).
Note: If the filter parameter is empty, this function will select all ancestors of a set of
elements, from the direct parent and all the way up to <body> and <html>. It is
therefore often useful to pass a selector expression to narrow down the search
result.
This method is similar to closest(), in
that they both traverse up the DOM tree. The differences are as follows:
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
closest()
Begins with the current element
Travels up the DOM tree and returns the first ancestor that matches the passed expression
The returned jQuery object contains zero or 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
$(selector).parents(filter)
| Parameter |
Description |
| filter |
Optional. Specifies a selector expression to narrow down the search for ancestors
Note: To return multiple ancestors, separate each expression with a comma. |
Try it Yourself - Examples
Narrow down the search
How to use the filter parameter to
return all ancestors of <span> that are <ul> elements.
Return multiple ancestors
How to use the filter parameter to
return all ancestors of <span> that are <li> and <div> elements.