jQuery .siblings() Method

What You’ll Learn

The .siblings() traversing method moves sideways in the DOM — it returns every sibling of each matched element except the element itself, optionally filtered by a selector. This tutorial covers the official list-item and multi-list hilite demos, selector filtering, comparisons with .next(), .prev(), .nextAll(), and .prevAll(), and practical tab-navigation patterns.

Introduction

Siblings share the same parent — think of list items in a ul, tabs in a toolbar, or paragraphs in a container. When you need every other element at that level — not just the next or previous neighbor — reach for .siblings().

Available since jQuery 1.0, .siblings([selector]) constructs a new jQuery object from all sibling elements of each item in the current set, excluding the source element itself. It does not descend into children or climb to ancestors — it stays on the same level of the tree, searching both directions among peers.

Understanding the .siblings() Method

Given a jQuery object representing a set of DOM elements, .siblings() looks at each element’s parent and collects every other child element — all previousElementSibling and nextElementSibling nodes in the chain. The source element is never included. When you pass a selector, only siblings that match are kept.

This is broader than .next() or .prev(), which each return at most one neighbor, and broader than .nextAll() or .prevAll(), which cover only one direction. .siblings() is the go-to method for “everyone else at this level” — perfect for tab UIs, accordion headers, or styling all other list items around a selection.

📝 Syntax

General form of .siblings:

.siblings( [ selector ] )

Parameters

• selector (optional) — a string containing a selector expression. Only siblings matching this selector are included in the result.

Return value

• A new jQuery object containing all siblings of each element in the current set, excluding the elements themselves (filtered when a selector is provided).

Official jQuery API list example

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

// Red background on list items 1, 2, 4, and 5 — every sibling except 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" ).siblings().css( "background-color", "red" );

list items 1, 2, 4, 5 → red background

Item 3 (the source) → unchanged

var len = $( ".hilite" ).siblings()

  .css( "color", "red" )

  .length;

$( "b" ).text( len );

All siblings of .hilite items → red text

Unique sibling count displayed in <b> (official demo: 9)

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

Sibling elements with .selected → yellow background

Non-matching siblings → unchanged

var $anchor = $( "#siblings-demo li.third-item" );

$anchor.siblings().css( "color", "green" );

$anchor.nextAll().css( "color", "blue" );

$anchor.prevAll().css( "color", "red" );



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

.siblings() → green on items 1, 2, 4, 5

.nextAll() → blue on items 4 and 5

.prevAll() → red on items 1 and 2

Item 3 (anchor) → never styled by any method

$( ".tab" ).on( "click", function () {

  $( this ).addClass( "active" )

    .siblings( ".tab" )

    .removeClass( "active" );

});

Clicked tab → .active added

All other .tab siblings → .active removed

Only one tab active at a time

🚀 Common Use Cases

• Tab navigation — $(this).addClass("active").siblings().removeClass("active").
• Accordion headers — close every other panel header when one opens.
• List item highlighting — official pattern: style all siblings except the selected item.
• Toolbar buttons — deactivate sibling toggle buttons when one is pressed.
• Filtered sibling sets — $("p").siblings(".selected") to target matching peers only.
• Exclusive multi-select — $collection.siblings().not($collection) when mutual siblings are in the starting set.

📝 Notes

• Available since jQuery 1.0 — optional selector argument included from the start.
• The source element is never included in the result — only its peers.
• Text nodes and comments between elements are skipped — jQuery uses element siblings only.
• When the starting collection has multiple mutual siblings, they may appear in each other’s results — use .not($collection) for an exclusive list.
• Empty result returns an empty jQuery object — safe to chain without errors.
• Pair with .nextAll() or .prevAll() when you need one direction only, and .next() / .prev() for a single neighbor.

💡 Best Practices