jQuery .prevUntil() Method

What You’ll Learn

The .prevUntil() traversing method collects preceding siblings up to a stop boundary — every sibling before the current element until (but not including) a matched selector, DOM node, or jQuery object. This tutorial covers the official definition-list demo, DOM-node stop with filter, comparisons with .prevAll(), and practical section-range patterns.

Introduction

Sometimes you need siblings in a range going backward — definitions before one term but not the previous heading, list items until a separator, or table rows until a header row. .prevAll() grabs everything behind; .prevUntil() stops at a boundary you define.

Available since jQuery 1.4 (DOM-node stop since 1.6), .prevUntil(stop [, filter]) walks backward through preceding siblings and halts before the first match of the stop argument. An optional filter narrows which siblings within that range are kept — ideal when terms and definitions share the same parent as mixed sibling types.

Understanding the .prevUntil() Method

Given a jQuery object representing a set of DOM elements, .prevUntil() examines each element’s preceding siblings in order (closest first). Siblings are added to the result until jQuery reaches one that matches the stop selector, DOM node, or jQuery object — that stop sibling is excluded. Siblings before the stop are never reached beyond the boundary.

Think of it as a sliding window among siblings: start just before your element, end right before the stop. Without a stop or when the stop is never found, the window extends to the beginning — equivalent to .prevAll(). The second filter argument lets you keep only certain tags or classes within that window.

📝 Syntax

General forms of .prevUntil:

.prevUntil( [ selector ] [, filter ] )

.prevUntil( [ element ] [, filter ] )

Parameters

• selector — a string containing a selector expression indicating where to stop matching preceding siblings (stop element excluded).
• element — a DOM node or jQuery object indicating the stop boundary (since jQuery 1.6).
• filter (optional) — a selector expression; only siblings in the range that match this filter are included.

Return value

• A new jQuery object containing preceding siblings up to but not including the stop match, optionally filtered.

Official jQuery API definition-list example

$( "#term-2" ).prevUntil( "dt" ).css( "background-color", "red" );

// Red on definition 1-a, 1-b, 1-c, 1-d — stops before term-1 dt

Examples Gallery

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

$( "#term-2" ).prevUntil( "dt" ).css( "background-color", "red" );

definition 1-a, 1-b, 1-c, 1-d → red background

term-1 dt and definitions 2-a, 2-b, 2-c → unchanged

var term1 = document.getElementById( "term-1" );

$( "#term-3" ).prevUntil( term1, "dd" ).css( "color", "green" );

dd elements from term-2 and term-1 definitions → green text

(term-2 dt skipped by "dd" filter; term-1 excluded as stop)

$( "#until-demo li.fifth-item" ).prevUntil( "li.stop" ).css( "color", "red" );

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



// .prevUntil("li.stop") → items 3 and 4 only | .prevAll() → items 1, 2, 3, and 4

.prevUntil("li.stop") → red on items 3 and 4 only (stops before li.stop on item 2)

.prevAll() → blue on items 1, 2, 3, and 4

$( "li.section-end" ).prevUntil( "li.section-start" )

  .addClass( "in-section" );

Items between .section-start and .section-end → .in-section

Items before .section-start → unchanged

$( "tr.group-head" ).prevUntil( "tr.group-head" )

  .addClass( "group-row" );

Data rows before each group-head → .group-row

Previous group-head row → stop boundary, not styled

🚀 Common Use Cases

• Definition lists — $("dt.term").prevUntil("dt") for definitions under the previous term.
• Sectioned lists — items between .section-start and .section-end markers.
• Grouped table rows — data rows until the previous tr.group-head.
• Wizard steps — steps in the current phase until a .phase-divider sibling.
• Mixed sibling filter — .prevUntil(stop, "dd") when only one tag type matters in the range.
• DOM-node boundary — stop at a known element reference from JavaScript.

📝 Notes

• Available since jQuery 1.4 — DOM-node or jQuery stop since 1.6.
• The stop element is never included — only siblings strictly before it in the chain.
• If the stop is not found, behavior matches .prevAll() (with optional filter).
• The optional filter applies to siblings within the range — not to the stop element.
• Text nodes and comments between elements are skipped — element siblings only.
• Mirror method: .nextUntil() — same range logic going forward.

💡 Best Practices