.prevUntil()S2C Home « Traversal « .prevUntil()

Preceding sibling element until retrieval.

Description

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

Syntax

Signature Description
.prevUntil()Retrieve all preceding siblings of each element within the matched set.
.prevUntil( [selector] [, filter] )Retrieve all preceding siblings of each element within the matched set, stopping at the specified selector.
Optionally filtered by another selector.
.prevUntil( [element] [, filter] )Retrieve all preceding siblings of each element within the matched set, stopping at the specified DOM node.
Optionally filtered by another selector.
.prevUntil( jQuery object [, filter] )Retrieve all preceding siblings 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 stop the match at.Selector
elementA DOM element 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.

.prevUntil() ExampleTop

Retrieve all preceding siblings of each element within the matched set.

Without any parameters the .prevUntil() method will match with all preceding siblings, so in this case it selects the same elements as the .prevAll() method.

In the example below we select all preceding 'tr' elements within the table that come before the 'tr' element with the id of 'trid1 and then change the background colour within the matched set.

Table For Testing The .prevUntil() Signature
Heading 1 Description 1
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Heading 2 Description 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2
Heading 3 Description 3
Table Row 5, Table Data 1 Table Row 5, Table Data 2
Table Row 6 (id of trid1), Table Data 1 Table Row 6 (id of trid1), Table Data 2


$(function(){
  $('#btn16').on('click', function() {
    $('.testtable #trid1').prevUntil()
             .css('backgroundColor', 'orange');
  });
});

Press the button below to action the above code:


.prevUntil( selector [, filter] ) ExamplesTop

Retrieve all preceding siblings 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 .prevUntil( selector [, filter] ) method will match with all preceding siblings, so in this case it selects the same elements as the .prevAll() method.

In the example when the left button is pressed below we select all preceding 'tr' elements within the table that come before the 'tr' element with the id of 'trid2. We then select all siblings we find until the 'tr' element with the id of 'trid3' and then change the background colour within the matched set.

When the right button is pressed below we select all preceding 'tr' elements within the table that come before the 'tr' element with the id of 'trid2, filtered with a class of 'trclass1'. We then select all siblings we find until the 'tr' element with the id of 'trid3' and then change the background colour within the matched set.

Table For Testing The .prevUntil( selector [, filter] ) Signature
Heading 1 Description 1
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2 (id of trid3), Table Data 1 Table Row 2 (id of trid3), Table Data 2
Heading 2 Description 2
Table Row 3 (class of trclass1), Table Data 1 Table Row 3 (class of trclass1), Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2
Heading 3 Description 3
Table Row 5 (class of trclass1), Table Data 1 Table Row 5 (class of trclass1), Table Data 2
Table Row 6 (id of trid2), Table Data 1 Table Row 6 (id of trid2), Table Data 2


$(function(){
  $('#btn17').on('click', function() {
    $('.testtable2 #trid2').prevUntil('#trid3')
             .css('backgroundColor', 'orange');
  });
  $('#btn18').on('click', function() {
    $('.testtable2 #trid2').prevUntil('#trid3', '.trclass1')
             .css('backgroundColor', 'red');
  });
});

Press the button below to action the above code:

            


.prevUntil( element [, filter] ) ExamplesTop

Retrieve all preceding siblings 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 .prevUntil( element [, filter] ) method will match with all preceding siblings, so in this case it selects the same elements as the .prevAll() method.

In the example when the left button is pressed below we select all preceding 'tr' elements within the table that come before the 'tr' element with the id of 'trid4. We then select all siblings we find until we hit the DOM node we saved from the DOM element with the id of 'trid5'. We then change the background colour within the matched set.

When the right button is pressed below we select all preceding 'tr' elements within the table that come before the 'tr' element with the id of 'trid4, filtered with a class of 'trclass2'. We then select all siblings we find until we hit the DOM node we saved from the DOM element with the id of 'trid5'. We then change the background colour within the matched set.

Table For Testing The .prevUntil( element [, filter] ) Signature
Heading 1 Description 1
Table Row 1 (id of trid5), Table Data 1 Table Row 1 (id of trid5), Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Heading 2 Description 2
Table Row 3 (class of trclass2), Table Data 1 Table Row 3 (class of trclass2), Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2
Heading 3 Description 3
Table Row 5 (class of trclass2), Table Data 1 Table Row 5 (class of trclass2), Table Data 2
Table Row 6 (id of trid4), Table Data 1 Table Row 6 (id of trid4), Table Data 2


$(function(){
  $('#btn19').on('click', function() {
    var trid5 = document.getElementById("trid5");
    $('.testtable3 #trid4').prevUntil(trid5)
             .css('backgroundColor', 'green');
  });
  $('#btn20').on('click', function() {
    var trid5 = document.getElementById("trid5");
    $('.testtable3 #trid4').prevUntil(trid5, '.trclass2')
             .css('backgroundColor', 'red');
  });
});

Press the button below to action the above code:

            


.prevUntil( jQuery object [, filter] ) ExamplesTop

Retrieve all preceding siblings 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 .prevUntil( jQuery object [, filter] ) method will match with all preceding siblings, so in this case it selects the same elements as the .prevAll() method.

In the example when the left button is pressed below we select all preceding 'tr' elements within the table that come after the 'tr' element with the id of 'trid6'. We then select all siblings we find until we hit the jQuery object we saved from the DOM element with the id of 'trid7'. We then change the background colour within the matched set.

When the right button is pressed below we select all preceding 'tr' elements within the table that come after the 'tr' element with the id of 'trid6'. We then select all siblings we find until we hit the jQuery object we saved from the DOM element with the id of 'trid7', filtered with a class of 'trclass3'. We then change the background colour within the matched set.

Table For Testing The .prevUntil( jQuery object [, filter] ) Signature
Heading 1 Description 1
Table Row 1 (id of trid7), Table Data 1 Table Row 1 (id of trid7), Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Heading 2 Description 2
Table Row 3 (class of trclass3), Table Data 1 Table Row 3 (class of trclass3), Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2
Heading 3 Description 3
Table Row 5 (class of trclass3), Table Data 1 Table Row 5 (class of trclass3), Table Data 2
Table Row 6 (id of trid6), Table Data 1 Table Row 6 (id of trid6), Table Data 2


$(function(){
  $('#btn42').on('click', function() {
    var $a = $('#trid7');
    $('.testtable4 #trid6').prevUntil($a)
             .css('backgroundColor', 'silver');
  });
  $('#btn43').on('click', function() {
    var $a = $('#trid7');
    $('.testtable4 #trid6').prevUntil($a, '.trclass3')
             .css('backgroundColor', 'fuchsia');
  });
});

Press the button below to action the above code: