jQuery Sibling Traversal

Sibling traversal moves horizontally in the DOM tree — to elements at the same level under the same parent. This is the technique behind tab switching, wizard step indicators, and ordered list manipulation where you need to operate on elements adjacent to a starting point.

Adjacent Siblings

.next() returns the immediately following sibling. .prev() returns the immediately preceding sibling. Both accept an optional selector to return the sibling only if it matches.

All Siblings

.nextAll(selector) collects all following siblings. .prevAll(selector) collects all preceding siblings. .siblings(selector) returns all siblings in both directions.

.next() — immediate next sibling
.prev() — immediate previous sibling
.nextAll() — all following siblings
.prevAll() — all preceding siblings
.siblings() — all siblings in both directions
.nextUntil(sel) — following siblings up to (not including) a selector

.nextUntil() and .prevUntil() are especially useful for range-selection patterns where you want everything between two known landmark elements.

Example

// Tab switcher: deactivate siblings, activate clicked
$('.tab').on('click', function () {
    $(this).addClass('active')
           .siblings().removeClass('active');
});

// Step wizard: highlight completed steps above current
$('#current-step').prevAll('.step').addClass('completed');

// Insert an element between two siblings
$('#item-3').after('<li id="item-3b">Item 3b</li>');

// Collect all items until a divider
var $group = $('#item-start').nextUntil('.divider');
console.log('Items in group:', $group.length);

// Alternate row colouring
$('tr:first').nextAll().filter(':even').addClass('stripe');

JAVASCRIPT

Full Editor

Pro Tip

Use .siblings().removeClass() paired with .addClass() on the current element for clean tab/menu switching.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned