jQuery .nextUntil() Method

What You’ll Learn

The .nextUntil() traversing method collects following siblings up to a stop boundary — every sibling after 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 .nextAll(), and practical section-range patterns.

Introduction

Sometimes you need siblings in a range — definitions under one term but not the next, list items until a separator, or table rows until a header row. .nextAll() grabs everything ahead; .nextUntil() stops at a boundary you define.

Available since jQuery 1.4 (DOM-node stop since 1.6), .nextUntil(stop [, filter]) walks forward through following 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 .nextUntil() Method

Given a jQuery object representing a set of DOM elements, .nextUntil() examines each element’s following siblings in order. 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 after the stop are never reached.

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

📝 Syntax

General forms of .nextUntil:

.nextUntil( [ selector ] [, filter ] )

.nextUntil( [ element ] [, filter ] )

Parameters

• selector — a string containing a selector expression indicating where to stop matching following 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 following siblings up to but not including the stop match, optionally filtered.

Official jQuery API definition-list example

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

// Red on definition 2-a, 2-b, 2-c — stops before term-3 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" ).nextUntil( "dt" ).css( "background-color", "red" );

definition 2-a, 2-b, 2-c → red background

term-3 dt and definitions 3-a, 3-b → unchanged

var term3 = document.getElementById( "term-3" );

$( "#term-1" ).nextUntil( term3, "dd" ).css( "color", "green" );

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

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

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

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



// .nextUntil("li.stop") → items 4 only | .nextAll() → items 4 and 5

.nextUntil("li.stop") → red on item 4 only (stops before li.stop on item 5)

.nextAll() → blue on items 4 and 5

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

  .addClass( "in-section" );

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

Items after .section-end → unchanged

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

  .addClass( "group-row" );

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

Next group-head row → stop boundary, not styled

🚀 Common Use Cases

• Definition lists — $("dt.term").nextUntil("dt") for definitions under one term.
• Sectioned lists — items between .section-start and .section-end markers.
• Grouped table rows — data rows until the next tr.group-head.
• Wizard steps — steps in the current phase until a .phase-divider sibling.
• Mixed sibling filter — .nextUntil(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 .nextAll() (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: .prevUntil() — same range logic going backward.

💡 Best Practices