jQuery .prevAll() Method

What You’ll Learn

The .prevAll() traversing method collects every preceding sibling before each matched element, optionally filtered by a selector. This tutorial covers the official list-item and div demos, filtered paragraph selection, comparisons with .prev() and .nextAll(), reverse document order, and the classic .prevAll().addBack() pattern.

Introduction

When one step backward is not enough — you need every sibling that comes before the current element — reach for .prevAll(). List items above a cutoff, divs before the last box, or wizard steps already completed all fit this pattern.

Available since jQuery 1.2, .prevAll([selector]) constructs a new jQuery object from all preceding siblings of each element in the current set. It stays on the same level of the DOM tree — siblings only, not children or ancestors — and optionally filters results with a selector expression. Results arrive in reverse document order, beginning with the closest sibling.

Understanding the .prevAll() Method

Given a jQuery object representing a set of DOM elements, .prevAll() walks backward through each element’s sibling list. Every element sibling that appears before the current node is included in the result. When you pass a selector, only matching siblings among those behind are kept.

This is broader than .prev(), which stops at the immediate neighbor, and directional — unlike .siblings(), which can return both preceding and following siblings. It is the mirror of .nextAll(). Pair .prevAll() with .addBack() when you need the starting element plus everything before it, and with .uniqueSort() when APIs like .wrapAll() require document order (jQuery 3.7+).

📝 Syntax

General form of .prevAll:

.prevAll( [ selector ] )

Parameters

• selector (optional) — a string containing a selector expression. Only preceding siblings that match this selector are included in the result.

Return value

• A new jQuery object containing all preceding siblings of each element in the current set (filtered when a selector is provided), in reverse document order — closest sibling first.

Official jQuery API list example

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

// Red background on list items 1 and 2 — all siblings before item 3

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.

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

list items 1 and 2 → red background

Items 3, 4, 5 → unchanged

$( "div" ).last().prevAll().addClass( "before" );

Last div → unchanged

All preceding div siblings → .before class (red border in demo)

$( ":last-child" ).prevAll( "p" ).addClass( "before" );

Preceding p elements before last child → .before class

Intervening div siblings → skipped by "p" filter

$( "#prev-demo li.third-item" ).prev().css( "color", "red" );

$( "#prevall-demo li.third-item" ).prevAll().css( "color", "blue" );



// .prev() → item 2 | .prevAll() → items 1 and 2

.prev() → red on item 2 only

.prevAll() → blue on items 1 and 2

$( "li.third-item" ).prevAll().addBack()

  .css( "background-color", "red" );

Items 1, 2, and 3 → red background

Items 4 and 5 → unchanged

🚀 Common Use Cases

• Disable completed steps — $(".step.current").prevAll(".step").addClass("done").
• Gray out earlier form fields — before a cutoff input, style all preceding inputs in the same group.
• Style leading table rows — highlight or remove every row before a selected anchor row.
• Tag all siblings before the last — official pattern: $("div").last().prevAll().addClass("before").
• Filter by type behind — $(":last-child").prevAll("p") for paragraphs only among mixed siblings.
• Range highlight with addBack — .prevAll().addBack() for starting item plus head.
• Fix order before wrapAll — .prevAll().uniqueSort().wrapAll("<div>") (jQuery 3.7+).

📝 Notes

• Available since jQuery 1.2 — optional selector argument filters preceding siblings.
• Returns all preceding siblings — not the immediate neighbor only (that is .prev()).
• Results are in reverse document order — closest sibling first, farthest last.
• Does not include the starting element — use .addBack() to merge it back in.
• Reverse order can break .wrapAll() — call .uniqueSort() first (jQuery 3.7+); older versions use $.uniqueSort().
• Text nodes and comments between elements are skipped — element siblings only.
• Pushes onto jQuery’s internal stack — pair with .end() to restore the previous set.
• Empty result when no preceding siblings exist — safe to chain without errors.

💡 Best Practices