jQuery .next() Method

What You’ll Learn

The .next() traversing method moves sideways in the DOM — it returns the immediately following sibling of each matched element, optionally filtered by a selector. This tutorial covers the official list-item and disabled-button demos, selector filtering, comparisons with .prev(), .nextAll(), and .siblings(), and practical row-navigation patterns.

Introduction

Siblings share the same parent — think of list items in a ul, table rows in a tbody, or buttons in a toolbar. When you need the element right after your current selection, reach for .next().

Available since jQuery 1.0 (selector filtering since 1.4), .next([selector]) constructs a new jQuery object from the immediately following sibling of each element in the current set. It does not descend into children or climb to ancestors — it stays on the same level of the tree, one step forward.

Understanding the .next() Method

Given a jQuery object representing a set of DOM elements, .next() looks at each element’s nextElementSibling in the DOM. If that neighbor exists, it is added to the result. When you pass a selector, jQuery includes the neighbor only if it matches — otherwise the result for that element is empty.

This is narrower than .nextAll(), which collects every following sibling, and narrower than .siblings(), which can return both directions. .next() is the precision tool for “the very next one” — perfect for step wizards, inline help text beside a disabled control, or highlighting the row below a selection.

📝 Syntax

General form of .next:

.next( [ selector ] )

Parameters

• selector (optional) — a string containing a selector expression. The immediately following sibling is included only if it matches this selector.

Return value

• A new jQuery object containing the immediately following sibling of each element in the current set (filtered when a selector is provided).

Official jQuery API list example

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

// Red background on list item 4 — the very next sibling after 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" ).next().css( "background-color", "red" );

list item 4 → red background

Items 1, 2, 3, 5 → unchanged

$( "button[disabled]" ).next().text( "this button is disabled" );

Span after each disabled button → "this button is disabled"

Enabled buttons → their spans unchanged

$( "p" ).next( ".selected" ).css( "background", "yellow" );

Paragraph whose immediate next sibling has .selected → yellow on that sibling

Other paragraphs → no match (next sibling lacks .selected)

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

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

$( "#siblings-demo li.third-item" ).siblings().css( "color", "green" );



// .next() → item 4 | .nextAll() → 4,5 | .siblings() → 1,2,4,5

.next() → red on item 4 only

.nextAll() → blue on items 4 and 5

.siblings() → green on items 1, 2, 4, and 5 (not item 3)

$( "tr.selected" ).next().addClass( "preview-row" );

Row immediately below .selected → .preview-row class

Last row (no next tr) → empty .next(), no change

🚀 Common Use Cases

• Inline help beside controls — $("input:invalid").next(".error-msg").show().
• Step wizards — $(".step.active").next(".step").addClass("active") (when steps are adjacent siblings).
• Accordion panels — toggle the panel immediately after a clicked header.
• Table row actions — highlight or expand the row below the current selection.
• Disabled control labels — official pattern: update text on the next span after button[disabled].
• Chained navigation — .next().next() skips two siblings when layout guarantees adjacency.

📝 Notes

• Available since jQuery 1.0 — optional selector argument since 1.4.
• Returns at most one sibling per source element — not all following siblings.
• Text nodes and comments between elements are skipped — jQuery uses element siblings only.
• With a selector, only the immediate next sibling is tested — no further scanning.
• Empty result returns an empty jQuery object — safe to chain without errors.
• Pair with .prev() for backward navigation and .nextAll() when you need the full tail of siblings.

💡 Best Practices