.parentsUntil() JQ Home  <<  Traversal  <<  .parentsUntil()

• <<    .parents()
• .prev()     >>

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

Parameters

Return

A jQuery object either containing the elements matched or empty.

.parentsUntil() Example Traversal  <<  Top

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 .content section of the page and turn the background colour to olive.

$(function(){
  $('#btn25').on('click', function() {
    $('.content').parentsUntil()
              .css('backgroundColor', 'olive');
  });
});

.parentsUntil( selector [, filter ] ) Example Traversal  <<  Top

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 '.content a' elements within the .content section of the page and turn the background colour to orange.

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

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

.parentsUntil( element [, filter ] ) Example Traversal  <<  Top

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 '.content a' elements within the .content 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 '.content'. We then turn the background colour to yellow.

When the right button is pressed below we select all ancestors of '.content a' elements within the .content 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 '.content'. We then turn the background colour to fuchsia.

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

.parentsUntil( jQuery object [, filter ] ) Example Traversal  <<  Top

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 '.content a' elements within the .content 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 '.content'. We then turn the background colour to maroon.

When the right button is pressed below we select all ancestors of '.content a' elements within the .content 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 '.content'. We then turn the background colour to silver.

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

Related Tutorials

jQuery Basic Tutorials - Lesson 6 - Tree Traversal

• <<    .parents()
• .prev()     >>