jQuery .end() Method

What You’ll Learn

The .end() traversing method pops jQuery’s internal selection stack and restores the matched set from before the most recent filtering step. This tutorial covers the official two-list .find() chain, paragraph border demo, stack visualization, compare with .addBack(), and nested .end() patterns.

Introduction

jQuery chaining is powerful: start with a selector, narrow with .find(), .filter(), or .children(), then style the result. But what if the next step needs the original matched set — not the narrowed subset? That is where .end() comes in.

Available since jQuery 1.0, .end() ends the most recent filtering operation and returns the collection to its previous state. Think of it as closing a nested block: each filtering method pushes a new set onto an internal stack, and .end() pops it back off.

Understanding the .end() Method

Most jQuery DOM traversal methods produce a new jQuery object matching a different set of elements. jQuery maintains a stack of previous sets inside the object. When you call .end(), the current set is discarded and replaced by the set from one level earlier.

.end() takes no arguments and does not modify the DOM — it only changes which elements the jQuery object refers to. It is most useful during method chaining when you want to avoid storing intermediate collections in variables.

📝 Syntax

General form of .end:

.end()

Parameters

• None — .end() does not accept any arguments.

Return value

• The previous jQuery object from the internal stack — the matched set before the most recent filtering operation.

Official jQuery API two-list chain

$( "ul.first" )
  .find( ".foo" )
  .css( "background-color", "red" )
  .end()
  .find( ".bar" )
  .css( "background-color", "green" );
// .foo red inside first ul only
// .bar green inside first ul only (end restored ul.first)

Examples Gallery

Examples 1–3 follow the official jQuery API documentation. Use DevTools or the Try-it links to run each snippet in the browser.

$( "ul.first" )
  .find( ".foo" )
  .css( "background-color", "red" )
  .end()
  .find( ".bar" )
  .css( "background-color", "green" );

First list: .foo → red, .bar → green
Second list: no colors (end restored ul.first scope)

$( "p" )
  .find( "span" )
  .end()
  .css( "border", "2px red solid" );

Every p element gets a red border.
Inner span elements → no border.

jQuery.fn.showTags = function ( n ) {
  var tags = this.map( function () { return this.tagName; } )
    .get().join( ", " );
  $( "b" ).eq( n ).text( tags );
  return this;
};

$( "p" )
  .showTags( 0 )           // P, P
  .find( "span" )
  .showTags( 1 )           // SPAN, SPAN, SPAN
  .css( "background", "yellow" )
  .end()
  .showTags( 2 )           // P, P again
  .css( "font-style", "italic" );

Slot 0: P, P
Slot 1: SPAN, SPAN, SPAN (after find)
Slot 2: P, P (after end — restored)

// .end() — paragraphs only:
$( "#end-demo p" ).find( "span" ).end().css( "outline", "2px solid red" );

// .addBack() — paragraphs AND spans:
$( "#back-demo p" ).find( "span" ).addBack().css( "outline", "2px solid blue" );

end demo: red outline on p only
addBack demo: blue outline on p and span

$( "#panel" )
  .find( "ul" )
  .find( "li" )
  .css( "color", "red" )
  .end()    // back to ul set
  .css( "border", "1px solid blue" )
  .end()    // back to #panel
  .css( "padding", "12px" );

li → red text
ul → blue border (first end)
#panel → padding (second end)

🚀 Common Use Cases

• Multi-step styling — style a subset, restore, style a different subset in the same container.
• Avoid temp variables — keep long chains readable without var $parent = ....
• After .find() / .filter() — return to the pre-filter matched set for the next operation.
• Plugin development — narrow internally, then .end() to preserve caller chain context.
• Visual symmetry — pair each narrowing method with a closing .end() for readable block structure.
• Event binding chains — find interactive children, bind events, restore parent for delegation setup.

📝 Notes

• Available since jQuery 1.0; works in all jQuery 1.x, 2.x, and 3.x versions.
• Takes no arguments — always pops exactly one stack level.
• Does not modify the DOM — only changes the active jQuery collection.
• Methods like .css() and .each() do not push onto the stack — only filtering/traversal methods that change the matched set do.
• Calling .end() when the stack is empty returns an empty jQuery object.
• For merging previous + current sets, use .addBack() instead of .end().

💡 Best Practices