.end() JQ Home  <<  Traversal  <<  .end()

State retrieval.

Description

The .end() method is used to end the most recent filtering operation in the current execution chain and return the matched set of elements to its previous state ( prior to the most recent filter being applied ).

  • 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 .end() method allows us to 'pop' the most recent set of elements off the stack.

Syntax

Signature Description
.end()End the most recent filtering operation in the current execution chain and return the matched set of elements to its previous state ( prior to the filter being applied ).

Parameters

None.

Return

A jQuery object containing the set of elements as it was before the last filtering operation.

.end() Example Traversal  <<  Top

End the most recent filtering operation in the current execution chain and return the matched set of elements to its previous state ( prior to the most recent filter being applied )

In the example when the left button is pressed we create a matched set of the elements of the list item marked with an id of 'id1' and change the background colour to yellow. We then further filter this set using a class selector of '.class1' and turn the background colour to orange.

When the right button is pressed we create a matched set of the elements of the list item marked with an id of 'id1' and change the background colour to olive. We then use the .end() method to 'pop' the set we created off the stack. This returns us to a matched set that includes all elements within the selector '.content ol'. Thus when we do the next .find() using a class selector of 'class1' and turn the background colour to teal the other list item with a class of 'class1' is also selected.

Notice how we don't indent the .end() method and place it under the other methods. This is purely a matter of taste but if you have a long method chain it makes the code more readable.

  1. Things To Do When I Get Up  (id of id1)
    1. Put The Kettle On  (class of class1)
    2. Put The Teabag in The Cup
    3. Wait for Kettle To Boil
    4. Pour Boiling Water In The Cup
  2. Things To Do When I Go To Bed  (id of id2)
    1. Turn Stuff Off  (class of class1)
    2. Put The Cat Out
    3. Lock The Doors
    4. Brush My Teeth


$(function(){
  $('#btn1').on('click', function() {
    $('.content ol').find('#id1')
                 .css('backgroundColor', 'yellow')
                 .find('.class1')
                 .css('backgroundColor', 'orange');
  });
  $('#btn2').on('click', function() {
    $('.content ol').find('#id1')
                 .css('backgroundColor', 'olive')
                 .end()
                 .find('.class1')
                 .css('backgroundColor', 'teal');
  });
});

Press the button below to action the above code:

             

Related Tutorials

jQuery Basic Tutorials - Lesson 7 - Other Traversal