.nextUntil() JQ Home  <<  Traversal  <<  .nextUntil()

Next sibling element until retrieval.

Description

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

Syntax

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

.nextUntil() Method ExampleTraversal  <<  Top

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

Without any parameters the .nextUntil() method will match with all following siblings, so in this case it selects the same elements as the .nextAll() method.

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

Table For Testing The .nextUntil() Signature
Heading 1 Description 1
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2 (id of trid1), Table Data 1 Table Row 2 (id of trid1), 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, Table Data 1 Table Row 6, Table Data 2


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

Press the button below to action the above code:

.nextUntil( selector [, filter] ) ExamplesTraversal  <<  Top

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

In the example when the left button is pressed below we select all following 'tr' elements within the table that come after 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.

In the example when the right button is pressed below we select all following 'tr' elements within the table that come after 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 .nextUntil( selector [, filter] ) Signature
Heading 1 Description 1
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2 (id of trid2), Table Data 1 Table Row 2 (id of trid2), 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 trid3), Table Data 1 Table Row 6 (id of trid3), Table Data 2


$(function(){
  $('#btn12').on('click', function() {
    $('.testtable2 #trid2').nextUntil('#trid3')
                           .css('backgroundColor', 'orange');
  });
  $('#btn13').on('click', function() {
    $('.testtable2 #trid2').nextUntil('#trid3', '.trclass1')
                           .css('backgroundColor', 'red');
  });
});

Press the button below to action the above code:

            

.nextUntil( element [, filter] ) ExamplesTraversal  <<  Top

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

If the DOM node is not found the .nextUntil( element [, filter] ) method will match with all following siblings, so in this case it selects the same elements as the .nextAll() method.

In the example when the left button is pressed below we select all following 'tr' elements within the table that come after 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.

In the example when the right button is pressed below we select all following 'tr' elements within the table that come after 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 .nextUntil( element [, filter] ) Signature
Heading 1 Description 1
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2 (id of trid4), Table Data 1 Table Row 2 (id of trid4), 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 trid5), Table Data 1 Table Row 6 (id of trid5), Table Data 2


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

Press the button below to action the above code:

            

.nextUntil( jQuery object [, filter] ) ExamplesTraversal  <<  Top

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

In the example when the left button is pressed below we select all following '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.

In the example when the right button is pressed below we select all following '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 .nextUntil( jQuery object [, filter] ) Signature
Heading 1 Description 1
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2 (id of trid6), Table Data 1 Table Row 2 (id of trid6), 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 trid7), Table Data 1 Table Row 6 (id of trid7), Table Data 2


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

Press the button below to action the above code:

            

Related Tutorials

jQuery Basic Tutorials - Lesson 6 - Tree Traversal