.addBack()S2C Home « Traversal « .addBack()

• <<    .add()
• .andSelf()     >>

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

Parameters

Return

A jQuery object either containing the elements matched or empty.

.addBack( [selector ] ) ExamplesTop

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

$(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('#trid1')
            .css('backgroundColor', 'red');
  });
});

• <<    .add()
• .andSelf()     >>