.nextAll() JQ Home  <<  Traversal  <<  .nextAll()

All next sibling elements retrieval.

Description

The .nextAll() method is used to retrieve all following sibling of each element within the matched set.

Syntax

Signature Description
.nextAll()Retrieve all following siblings of each element within the matched set.
.nextAll( selector )Retrieve all following siblings of each element within the matched set, but only if they match the specified selector.

Parameters

Parameter Description Type
selectorA string containing a CSS or custom jQuery selector.Selector

Return

A jQuery object either containing the elements matched or empty.

.nextAll() Example Traversal  <<  Top

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

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 .nextAll() Signature
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
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


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

Press the button below to action the above code:

.nextAll( selector ) Example Traversal  <<  Top

Retrieve all following siblings of each element within the matched set, but only if they match the specified selector.

In the example below we select all following 'tr' elements within the table that come after the 'tr' element with the id of 'trid2. We then filter on rows with a class of 'usetr' and then change the background colour within the matched set.

Table For Testing The .nextAll( selector) Signature
Table Row 1 (id of trid2), Table Data 1 Table Row 1 (id of trid2), Table Data 2
Table Row 2 (class of usetr), Table Data 1 Table Row 2 (class of usetr), Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4 (class of usetr), Table Data 1 Table Row 4 (class of usetr), Table Data 2 


$(function(){
  $('#btn8').on('click', function() {
    $('.testtable2 #trid2').nextAll('.usetr')
                           .css('backgroundColor', 'orange');
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 6 - Tree Traversal