The jQuery parent method

The parent method traverses just one level up and searches the parent of the specified element.

See parent example to add text

Consider this structure in DOM:

<div>

<p>Paragraph text here

<span>span content here</span>

</p>

</div>

In that case, the div is a parent, p is the child of div while the span is a child of p and grandchild of the div element. If you specify <span> element in jQuery parent method, it will get <p> as the parent of span element! That is, the parent method will travel just one level up and get the parent of the specified element.

See another example with CSS

Similarly, if you specify <p> in the parent method, it will get the div element as the parent of <p> in above structure.

Note: In order to get all ancestors of the specified element, i.e. if you specify <span> and want to get all parents upwards you can use parents method of jQuery.

This tutorial explains only about parent method of jQuery. You can see examples below but let us first look at the basic syntax of the $.parent method.

Syntax of $.parent method of jQuery

The basic syntax of the $.parent method of jQuery is:

$(“child_element”).parent();

Where a child element can be a selector, an element like span, paragraph, div etc.

Example of jQuery parent method to add text

In this example, we have three levels; the first level is parent div while the second level is a paragraph within the div. The third level is a span element which is the child of the paragraph while grandchild of div.

The parent method will specify span element that will get parent (paragraph in that case) and add text ahead of this parent paragraph by using the after method. See below:

Experience this example online

You can see, as you click the button it finds span parent which is a paragraph and adds some text content “some test text”.

jQuery get parent and add CSS example

In this example, we will specify a paragraph in jQuery parent method that will get parent (div) and adds some CSS by using the addClass method. See the demo below:

Experience this example online

You can see, when you click the button “Run parent method”, it will get the parent of a paragraph which is a div. This will apply CSS class by using the addClass function in div element that covers all child elements as well.

So, the dashed border line along with color change will be applied to not only in div but also p and span element as well.

Related reading: jQuery find method | jQuery $.children | jQuery $.filter