Traversing Siblings Forward
In this page:
next()
.next() returns the single sibling element that comes right after the selected one at the same level, or an empty set if there isn't one. It only ever returns at most one element, no matter how many siblings follow.
Example: next()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="first">First</p><p id="second">Second</p>
<script>
console.log($("#first").next().text());
</script>
</body>
</html>nextAll()
nextAll() selects every sibling that follows the selected element, all the way to the end of its parent's children, not just the very next one. This is useful when you need to act on an entire run of elements after a given point.
Example: nextAll()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>One</p><p id="start">Two</p><p>Three</p><p>Four</p>
<script>
console.log($("#start").nextAll().length);
</script>
</body>
</html>nextUntil()
nextUntil() selects the following siblings but stops just before reaching a matching element you specify, rather than collecting all the way to the end. This lets you grab exactly the siblings between two known points.
Example: nextUntil()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="start">Start</p><p>Mid 1</p><p>Mid 2</p><p id="end">End</p>
<script>
console.log($("#start").nextUntil("#end").length);
</script>
</body>
</html>next with Filters
You can combine next(), nextAll(), or nextUntil() with a selector to only match siblings of a certain type, filtering out ones you don't care about. This avoids having to manually check each returned element's tag or class afterward.
Example: next with Filters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="start">Start</p><span>Not a p</span><p>Next p</p>
<script>
console.log($("#start").nextAll("p").length);
</script>
</body>
</html>Forward Traversal Practice
Forward sibling traversal is useful for step-based layouts and lists, like highlighting every step after the currently active one in a multi-step form. Since these methods only look forward, they naturally express 'everything that comes after this point'.
Example: Forward Traversal Practice
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.step { display: inline-block; padding: 6px 10px; border: 1px solid #999; }
.step.active { background: #4a90d9; color: #fff; }
.step.upcoming { background: #ffe082; }
</style>
</head>
<body>
<div class="step active">1</div><div class="step">2</div><div class="step">3</div>
<script>
$(".step.active").nextAll(".step").addClass("upcoming");
</script>
</body>
</html>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: