FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

jQuery parentsUntil() Method

jQuery HTML Methods jQuery Traversing Methods

Example

Return all ancestor elements between <span> and <div>:

$(document).ready(function(){
    $("span").parentsUntil("div").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 parentsUntil() method returns all ancestor elements between the selector and stop.

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, until it reaches a specific element.

Note: If both parameters are empty, this method will return all ancestor elements (same as the parents() method).

Related methods:

  • parent() -  returns the direct parent element of the selected element
  • parents() - returns all ancestor elements of the selected element
  • closest() - returns the first ancestor of the selected element

Syntax

$(selector).parentsUntil(stop,filter)

Parameter Description
stop Optional. A selector expression, element or jQuery object indicating where to stop the search for matching ancestor elements
filter Optional. Specifies a selector expression to narrow down the search for ancestors between selector and stop

Note: To return multiple ancestors, separate each expression with a comma.

Examples

Try it Yourself - Examples

Narrow down the search
How to use both parameters to filter the search for a specific element between <span> and <div>.

Return multiple ancestors
How to return multiple ancestors between <span> and <body>.

DOM
Return all ancestors between <span> and <div> using a DOM element.

Using a DOM element and a selector expression to filter the search
Using a DOM element to narrow down the ancestor search for <ul> elements between <span> and <div>.


jQuery HTML Methods jQuery Traversing Methods