.addBack() JQ Home  <<  Traversal  <<  .addBack()

Stack retrieval.

Description

The .addBack() method is used to add the previous set of elements on the jQuery stack to the current set of elements, optionally filtered by a selector.

  • When we chain our traversal or filtering methods together, many of the jQuery methods used operate on an existing jQuery instance and produce a new jQuery object that match a different set of elements. jQuery maintains the previous set of elements, as well as the new set of elements as an internal stack. We can visualize this stack where the newest set of elements is 'pushed' onto the stack. As we continue through our jQuery chain, each new traversal or filtering method will create a new set of elements that gets 'pushed' onto the stack. The .addBack() method allows us to add the previous set of elements from the stack to the current set of elements, optionally filtered by a selector.

Syntax

Signature Description
.addBack( [selector ] )Add the previous set of elements on the jQuery stack to the current set of elements, optionally filtered by a selector.

Parameters

Parameter Description Type
selectorA string containing a CSS or custom jQuery selector to match elements against.Selector

Return

A jQuery object containing this set of elements as well as the previous set of elements retrieved from the jQuery stack.

.addBack( [selector ] ) ExamplesTraversal  <<  Top

Add the previous set of elements on the jQuery stack to the current set of elements, optionally filtered by a selector.

In the example below when the left button is pressed we select all preceding 'tr' elements within the table that come before the 'tr' element with the class of 'trid1 and then change the background colour to orange within the matched set. This will select all 'tr' elements within the table that come before the last 'tr' element with the class of 'trid1' (first 3 rows).

When the middle button is pressed we select all preceding 'tr' elements within the table that come before the 'tr' element with the class of 'trid1. We then add the previous item on the stack using .addBack() (our original selection) and then change the background colour to teal within the matched set. Notice that now all table rows are changed.

When the right button is pressed we select all preceding 'tr' elements within the table that come before the 'tr' element with the class of 'trid1. We then add the previous item on the stack using .addBack('#trid1') (our original selection filtered by a selector) and then change the background colour to red within the matched set. Notice that all table rows are changed to a red background except the last row as this doesn't have an id of '#trid1'.

Table For Testing The .addBack() Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, (row class and id of trid1), Table Data 1 Table Row 3, (row class and id of trid1), Table Data 2
Table Row 4, (row class of trid1), Table Data 1 Table Row 4, (row class of trid1) Table Data 2 


$(function(){
  $('#btn3').on('click', function() {
    $('.testtable .trid1').prevAll()
                          .css('backgroundColor', 'orange');
  });
  $('#btn4').on('click', function() {
    $('.testtable .trid1').prevAll()
                          .addBack()
                          .css('backgroundColor', 'teal');
  });
  $('#btn16').on('click', function() {
    $('.testtable .trid1').prevAll()
                          .addBack('.testtable .trid1 #trid1')
                          .css('backgroundColor', 'red');
  });
});

Press the button below to action the above code:

                           

Related Tutorials

jQuery Basic Tutorials - Lesson 7 - Other Traversal