.parentsUntil()S2C Home « Traversal « .parentsUntil()

Ancestor element until retrieval.

Description

The .parentsUntil() method is used to retrieve the ancestors of each element within the matched set, up to but not including the selector, DOM node, or jQuery object specified.

  • Use the .parent() method instead if you only want to go up one level to retrieve the immediate parent.

Syntax

Signature Description
.parentsUntil()Retrieve the ancestors of each element within the matched set.
.parentsUntil( selector [, filter ] )Retrieve the ancestors of each element within the matched set, stopping at the specified selector.
Optionally filtered by another selector.
.parentsUntil( element [, filter ] )Retrieve the ancestors of each element within the matched set, stopping at the specified DOM node.
Optionally filtered by another selector.
.parentsUntil( jQuery object [, filter] )Retrieve the ancestors of each element within the matched set, stopping at the specified jQuery object.
Optionally filtered by another selector.

Parameters

Parameter Description Type
selectorA string containing a CSS or custom jQuery selector to match elements against.Selector
elementA DOM node to stop the match at.Element
jQuery objectA jQuery object to stop the match at.jQuery
filterA string containing a CSS or custom jQuery selector expression to match elements against.Selector

Return

A jQuery object either containing the elements matched or empty.

.parentsUntil() ExampleTop

Retrieve the ancestors of each element within the matched set.

Without any parameters the .parentsUntil() method will match with all ancestors, so in this case it selects the same elements as the .parents() method.

In the example below we select the ancestors of the '#main form' sections of the page and turn the background colour to silver.


$(function(){
  $('#btn25').on('click', function() {
    $('#main form').parentsUntil()
              .css('backgroundColor', 'silver');
  });
});

Press the button below to action the above code:


.parentsUntil( selector [, filter ] ) ExamplesTop

Retrieve the ancestors of each element within the matched set, stopping at the specified selector, optionally filtered by another selector.

If the selector specified is not found the .parentsUntil( selector [, filter] ) method will match with all ancestors, so in this case it selects the same elements as the .parents() method.

In the example below when the left button is pressed below we select all ancestors of '#main a' elements within the #main section of the page and turn the background colour to orange.

When the right button is pressed below we select all 'p' ancestors of '#main a' elements within the #main section of the page and turn the background colour to teal.


$(function(){
  $('#btn26').on('click', function() {
    $('#main a').parentsUntil('#main')
                .css('backgroundColor', 'orange');
  });
  $('#btn27').on('click', function() {
    $('#main a').parentsUntil('#main', 'p')
                .css('backgroundColor', 'teal');
  });
});

Press the button below to action the above code:

            


.parentsUntil( element [, filter ] ) ExamplesTop

Retrieve the ancestors of each element within the matched set, stopping at the specified DOM node, optionally filtered by another selector.

If the DOM node specified is not found the .parentsUntil( element [, filter] ) method will match with all ancestors, so in this case it selects the same elements as the .parents() method.

In the example below when the left button is pressed below we select all ancestors of '#main a' elements within the #main section of the page. We then select all siblings we find until we hit the DOM node we saved from the DOM element with the id of '#main'. We then turn the background colour to yellow.

When the right button is pressed below we select all ancestors of '#main a' elements within the #main section of the page, filtered by 'p' element. We then select all siblings we find until we hit the DOM node we saved from the DOM element with the id of '#main'. We then turn the background colour to fuchsia.


$(function(){
  $('#btn28').on('click', function() {
    var main = document.getElementById("main");
    $('#main a').parentsUntil(main)
                .css('backgroundColor', 'yellow');
  });
  $('#btn29').on('click', function() {
    var main = document.getElementById("main");
    $('#main a').parentsUntil(main, 'p')
                .css('backgroundColor', 'fuchsia');
  });
});

Press the button below to action the above code:

            


.parentsUntil( jQuery object [, filter ] ) ExamplesTop

Retrieve the ancestors of each element within the matched set, stopping at the specified jQuery object, optionally filtered by another selector.

If the jQuery object specified is not found the .parentsUntil( jQuery object [, filter] ) method will match with all ancestors, so in this case it selects the same elements as the .parents() method.

In the example below when the left button is pressed below we select all ancestors of '#main a' elements within the #main section of the page. We then select all siblings we find until we hit the jQuery object we saved from the DOM element with the id of '#main'. We then turn the background colour to maroon.

When the right button is pressed below we select all ancestors of '#main a' elements within the #main section of the page, filtered by 'p' element. We then select all siblings we find until we hit the jQuery object we saved from the DOM element with the id of '#main'. We then turn the background colour to silver.


$(function(){
  $('#btn44').on('click', function() {
    var $main = document.getElementById("main");
    $('#main a').parentsUntil($main)
                .css('backgroundColor', 'maroon');
  });
  $('#btn45').on('click', function() {
    var $main = document.getElementById("main");
    $('#main a').parentsUntil($main, 'p')
                .css('backgroundColor', 'silver');
  });
});

Press the button below to action the above code: