Code has been added to clipboard!

How to Retrieve jQuery Parent of Element: Methods Explained

Reading time 3 min
Published Dec 21, 2017
Updated Oct 9, 2019

We have already discussed the basics of traversing. Next we'll discuss the methods that you can get from jQuery library to retrieve information about elements' parents and ancestors. This tutorial introduces usage and definitions of the following functions: jQuery .parent(), .parents(), and .parentsUntil().

You will learn how to add selector expressions to these functions.

jQuery Parent: Main Tips

  • In jQuery, traversing refers to moving through the DOM tree to access certain HTML elements.
  • By using jQuery, you can traverse upwards the DOM tree.
  • There are three main methods used to retrieve parents or other ancestors.

Traversing Ancestors

When traversing upwards, jQuery provides these methods:

  • .parent(): return direct parent and traverse one level up the DOM tree.
  • .parents(): return all ancestors up to the root, can filter the search.
  • .parentsUntil(): return all ancestors in between two specified elements.

.parent()

By using the jQuery .parent() method, you can traverse one level up the DOM tree and return the direct parent of a specified element. It is also possible to add a selector expression ($()). Then, the specified elements are filtered to find matches. The following syntax is used for this statement:

$(selector).parent([filter])

To see how we make jQuery get parent element, take a look at a code example of this method:

Example
$("span").parent().css({
  "color": "blue", 
  "border": "2px solid green"
});
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

.parents()

The jQuery .parents() function returns all ancestors of the specified element up the root. Just like in the previous method, you can add a selector to find specific matches. We present the correct way of writing this statement for finding jQuery ancestors:

$(selector).parents([filter])

By entering the optional filter, you can filter the search for ancestors.

Now, take a look at this code example, showing the usage of jQuery .parents():

Example
$("li").parents().css({
  "color": "blue", 
  "border": "2px solid green"
});

.parentsUntil()

The jQuery .parentsUntil() method returns all ancestors of the specified element up the root. You can add a selector for this function. If method traverses succesfully (finds a match), the jQuery object will be generated. It will consist of all ancestors up to the match (won't include the actual match). Here is the syntax for this statement:

$(selector).parentsUntil([selector],[filter])

Now, take a look at a code example of this method in use:

Example
$("li").parentsUntil("div").css({
  "color": "blue", 
  "border": "2px solid green"
});

jQuery Parent: Summary

  • To make jQuery get parent elements, you will have to move through the DOM tree.
  • There are three main functions, designed to retrieve parents and further ancestors: .parent(), .parents(), and .parentsUntil().

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 22/01/2021
3176 People Used
Only 97 Left
Rating
5.0