X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

jQuery parent() Method

jQuery HTML Methods jQuery Traversing Methods

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


Examples

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 "1" 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.


jQuery HTML Methods jQuery Traversing Methods


Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook