.next() Method?.next([selector]) (since jQuery 1.0) returns the immediately following sibling of each element in the set. With an optional selector, that sibling is kept only if it matches.
$("li.third-item").next(); // item 4
$("button[disabled]").next(); // next sibling after each disabled button
$("p").next(".selected"); // next sibling only if it has .selected
// Not the same:
$("li").nextAll(); // all following siblings| Need | Use |
|---|---|
| One step forward | .next() |
| One step backward | .prev() |
| All following siblings | .nextAll() |
| Following until a stop | .nextUntil() |
| All siblings either side | .siblings() |
.next()Start from an element, then take one step to the right in the sibling list.
.next() for the immediate following sibling.| Piece | Required? | Role |
|---|---|---|
| Current set | Yes | Elements whose next sibling you want |
selector | No | Keep the next sibling only if it matches |
| Return value | — | New jQuery object (0 or more next siblings) |
for each element E in current set
N = immediate next element sibling of E
if N does not exist
skip
else if selector provided and N does not match selector
skip
else
keep N| Goal | Code |
|---|---|
| Next sibling | $("li.start").next() |
| Next only if class matches | $("p").next(".selected") |
| Label after disabled buttons | $("button[disabled]").next() |
| Previous sibling | $("li.start").prev() |
| All after this one | $("li.start").nextAll() |
| Check if a next exists | if ($el.next().length) { … } |
Start at item 3 and compare .next(), .nextAll(), and .prev().
Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.
From the jQuery docs: red background on the item right after li.third-item.
$("li.third-item").next().css("background-color", "red");li.third-item (item 3)..nextAll().Official pattern: change the text of the sibling right after each disabled button.
$("button[disabled]").next().text("this button is disabled");button[disabled].span)..next(".selected")Keep the next sibling only when it has class selected.
$("p").next(".selected").css("background", "yellow");p is a starting point..selected..selected further down is ignored..next() vs .nextAll() vs .siblings()One neighbor, all after, or every sibling — count the difference.
var $start = $("li.third-item");
console.log(".next() →", $start.next().length);
console.log(".nextAll() →", $start.nextAll().length);
console.log(".siblings() →", $start.siblings().length);From a selected row, style the row immediately below it.
$("tr.selected").next().css("backgroundColor", "#fef9c3");tr.| Case | What happens | Fix |
|---|---|---|
| No next sibling | Empty set | Check .next().length if needed |
| Expecting skip to next match | .next(".x") may be empty | Use .nextAll(".x").first() |
| Text / comment nodes | Ignored — element siblings only | Normal for jQuery traversal |
| Wanting all after | .next() returns one | Use .nextAll() |
| Going backward | Wrong direction | Use .prev() |
.next() has been part of jQuery since 1.0. It works in every browser where jQuery runs — a core traversing method with no deprecation.
Stable across jQuery 1.x–3.x. Optional selector filter has been available since the method was introduced.
Bottom line: Safe for production and learning. Pair with .prev(), .nextAll(), and .siblings() for full sibling navigation.
| Approach | Cost | Best for |
|---|---|---|
.next() | Cheapest | One-step sibling moves |
.nextAll() | More work | Collecting every following sibling |
.siblings() | More work | Both directions at once |
Prefer .next() when you only need the immediate neighbor. Wider methods walk more of the sibling list.
.next(sel) keeps that sibling only if it matches — no skipping..nextAll(): one neighbor vs all following..prev() does the same step backward.One line: .next() returns the immediate next sibling — use .nextAll() when you need everything after.
Collect every following sibling — not just the immediate one.
10 people found this page helpful