jQuery Siblings
Siblings are elements that share the same parent, sitting side by side on the same level of the DOM tree. Think of a row of navigation links or a stack of paragraphs inside a section. jQuery gives you a rich set of methods to move sideways: grab all siblings at once, or step precisely to the element right before or after your current one. This lesson walks through the whole family.
Moving Sideways in the DOM
So far you have moved up toward ancestors and down toward descendants. Sibling methods let you move horizontally. Starting from a selected element, you can reach the elements that share its parent without touching anything above or below. This is perfect for tasks like highlighting the neighbors of a clicked item or hiding everything except the current step in a form.
- siblings() - all elements that share the same parent, excluding the element itself.
- next() - the single element immediately after the current one.
- prev() - the single element immediately before the current one.
- nextAll() and prevAll() - every element after, or every element before, the current one.
- nextUntil() and prevUntil() - the elements between the current one and a matched stopping point.
Getting All Siblings
The siblings() method returns every element on the same level, skipping the one you started from. You can pass an optional selector to keep only the siblings you want.
Using siblings()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul>
<li>First item</li>
<li class="active">Active item</li>
<li>Third item</li>
</ul>
<div>
<h2 class="title">Section Title</h2>
<p>First sibling paragraph.</p>
<p>Second sibling paragraph.</p>
</div>
<script>
$(document).ready(function() {
// Highlight all siblings of the active list item
$("li.active").siblings().css("color", "#888");
// Only the sibling paragraphs of the selected heading
$("h2.title").siblings("p").css("font-style", "italic");
});
</script>
</body>
</html>Stepping to the Next or Previous Element
When you only need the immediate neighbor, next() and prev() are your tools. Each returns just one element. If you need everything in one direction, use nextAll() or prevAll(). And when you want to stop at a specific marker, nextUntil() and prevUntil() collect everything between your start point and the element that matches the selector you pass.
next, prev, and until
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div>
<p id="step1">Step 1</p>
<p id="step2">Step 2</p>
<p id="step3">Step 3</p>
</div>
<div>
<p id="start">Start</p>
<p>Middle paragraph A</p>
<p>Middle paragraph B</p>
<p id="end">End</p>
</div>
<script>
$(document).ready(function() {
// The element right after the current one
$("#step2").next().css("background", "#eef");
// The element right before the current one
$("#step2").prev().css("background", "#fee");
// Everything between #start and #end (exclusive)
$("#start").nextUntil("#end").css("opacity", "0.5");
});
</script>
</body>
</html>Exercise: jQuery Siblings
What does .siblings() return relative to the selected element?
