jQuery parent() Method
Example
Return the direct parent element of <span>:
$(document).ready(function(){
$("span").parent().css({"color": "red", "border": "2px solid red"});
});
Result:
body (great-great-grandparent)
div (great-grandparent)
ul (grandparent)
- li (direct parent)
span
Try it Yourself »
Definition and Usage
The parent() method returns the direct parent element of the selected element.
The DOM tree: This method only traverse a single level up the DOM tree. To traverse all the way up to the document's root element (to return grandparents or other ancestors), use the parents() or the parentsUntil() method.
Tip: To traverse a single level down the DOM tree, or all the way down to the last descendant (to return children or other descendants), use the children() or find() method.
Syntax
$(selector).parent(filter)
| Parameter | Description |
|---|---|
| filter | Optional. Specifies a selector expression to narrow down the parent search |
Try it Yourself - Examples
Return the direct parent of each <span> element
How to
return the direct parent of each <span> element.
Narrow down the search
How to use the filter parameter to
return the parent <li> element with class name "first" of each <span>.
Return
the direct parent <div> element of each <p> element
How to return all the direct parent <div> element of each <p> element.
Show
the ancestor elements of an element by tag names
A demonstration which shows
who the ancestors of a <span> element
actually are.
