jQuery .addBack() Method

What You’ll Learn

The .addBack() traversing method merges the previous selection on jQuery’s internal stack with the current matched set — optionally filtered by a selector. This tutorial follows the official jQuery API demos for .nextAll() and .find(), compares .addBack() with .end(), and covers the deprecated .andSelf() rename.

Introduction

Chained jQuery calls often narrow a selection: start with a list item, call .nextAll() to grab later siblings, or call .find("p") to descend into children. Sometimes you need both the original elements and the narrowed subset in one collection.

jQuery keeps an internal stack of matched sets as you traverse. The .addBack() method (added in jQuery 1.8, replacing .andSelf()) merges the previous stack entry with the current set so you can keep chaining — without starting a new $() query.

Understanding the .addBack() Method

After a traversing method pushes a new set onto the stack, .addBack() returns a jQuery object containing the union of the current set and the immediately previous set. Duplicates are removed; elements appear in document order when possible.

Pass an optional selector to filter the merged result — only elements matching that expression remain. This is handy when the union is broader than what you need but you still want stack-based merging instead of manual .add() calls.

📝 Syntax

General form of .addBack:

.addBack( [selector ] )

Parameters

• selector (optional) — a string containing a selector expression to filter the merged set. When omitted, every element from the previous and current sets is included.

Return value

• A new jQuery object containing the previous stack set united with the current set, optionally filtered.

Official jQuery API example

$( "li.third-item" ).nextAll().addBack()
  .css( "background-color", "red" );
// Items 3, 4, and 5 highlighted — not 1 or 2

Examples Gallery

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

$( "li.third-item" ).nextAll().addBack()
  .css( "background-color", "red" );

list items 3, 4, and 5 → red background
items 1 and 2 → unchanged

// Only paragraphs highlighted:
$( "div.before-addback" ).find( "p" ).addClass( "background" );

// Div AND paragraphs highlighted:
$( "div.after-addback" ).find( "p" ).addBack().addClass( "background" );

Before: yellow background on p elements only.
After: yellow background on div.after-addback AND its p children.

$( "ul.menu" ).find( "li" ).addBack( ".active" )
  .css( "font-weight", "bold" );

Only .active items from the merged ul + li set are bold.

// addBack → items 3, 4, 5
$( "li.third-item" ).nextAll().addBack().length; // 3

// end → only item 3 (previous set)
$( "li.third-item" ).nextAll().end().length; // 1

addBack().length → 3
end().length → 1

$( "ul.highlight-list" )
  .find( "li.done" )
  .addBack()
  .css( "border", "2px solid green" );

Green border on ul.highlight-list and each li.done inside it.

🚀 Common Use Cases

• Sibling ranges — highlight a list item plus all following siblings with .nextAll().addBack().
• Container styling — include a wrapper div when descendants are selected via .find().
• Filtered unions — merge stack sets then restrict with .addBack(".class").
• Event delegation cleanup — bind handlers on a parent and matched children in one chain.
• Animation batches — fade a panel and its active child tabs together.
• Legacy migration — replace deprecated .andSelf() calls with .addBack().

📝 Notes

• Available since jQuery 1.8; replaces deprecated .andSelf() (jQuery 1.2–1.7).
• Only merges with the immediately previous set on the stack — not the entire history.
• Use .end() when you want the previous set alone, not a union.
• Use .add() when merging with elements outside the stack (new selector or DOM node).
• Optional selector filters the merged result — it does not change which sets are united.
• Traversing methods that do not push a new set will leave nothing meaningful for .addBack() to merge.

💡 Best Practices