jQuery parentsUntil() method

The parentsUntil() method is an inbuilt jQuery method. It is used to get all ancestor elements between the selector and stop. This method traverses upwards from the parent element along with the ancestors.

If the selector is not supplied or not matched, the parentsUntil() method will return all selected ancestor elements as similar to the parents() method.

Syntax

The selector in the above syntax is the starting element. It can be a tag name, class name or an id of the element. The parentsUntil() method accepts two optional parameters that are defined as follows -

stop: This is an optional parameter. It can be a selector expression, a jQuery object or an element that indicate where to stop the search in between the parameters selector and stop.

filter: This is also an optional parameter. It is a selector expression to narrow down the search for ancestors. If we want to get multiple ancestors, we have to separate the expressions with a comma.

Let's understand the parentsUntil() method using some illustrations.

Example1

In this example, we are not using the optional parameter of the parentsUntil() method. Here, there is a div element that contains a ul element, a heading h2, and a paragraph element.

We are applying the parentsUntil() method for searching the ancestors of the heading h2. Though we are not passing any element to stop the searching so, the method will return all ancestors of the given selector, including the body element.

<!DOCTYPE html>
<html>
<head>
<style>
.main *{ 
  border: 2px solid black;
  padding: 10px;
  margin: 15px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function fun(){
$(document).ready(function(){
  $("p").parentsUntil().css({ "color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>
<body class = "main"> body
  <div> div
    <ul> ul 
      <h2> Heading h2
          <p> Paragraph element </p>
      </h2>
    </ul>   
	</div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we are using both optional parameters of the parentsUntil() method. We are passing the p as the selector, #div1 as the stop parameter, and div ul as the value of the filter parameter. The method will return the div, and ul ancestors of the paragraph p occur before the div element with id = "div1".

We are specifying the two values of the filter parameter that are separated by a comma.

<!DOCTYPE html>
<html>
<head>
<style>
.main *{ 
  border: 2px solid black;
  padding: 10px;
  margin: 15px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
  $("p").parentsUntil("#div1", "div, ul").css({ "border": "3px dashed blue"});
});
}
</script>
</head>
<body class = "main"> body
  <div id = "div1"> div1
    <ul> ul 
	<div id = "div2"> div2 
      <h4> Heading h4
	  <div id = "div3"> div3
          <p> Paragraph element </p>
		  </div>
      </h4>
	  </div>
    </ul>   
	</div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

On clicking the given button, the div and ul ancestors of p occur before div with id = "div1"will get selected as shown in the below screenshot. After clicking the given button, the output will be -