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

• <<    .nextAll()
• .offsetParent()     >>

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

Parameters

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.

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

.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.

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

.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.

$(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');
  });
});

.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.

$(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');
  });
});

Related Tutorials

jQuery Basic Tutorials - Lesson 6 - Tree Traversal

• <<    .nextAll()
• .offsetParent()     >>