jQuery .siblings() Method

Beginner
6 min read
Updated: Oct 2026
5 examples
Live preview
Definition

What Is .siblings()?

.siblings() gets the siblings of each element in the current set — all elements that share the same parent, excluding the element itself. Optional selector filter. Available since jQuery 1.0.

Remember
$("li.third-item").siblings()           → 1, 2, 4, 5 (not 3)
$("p").siblings(".selected")            → filtered siblings only

Parent
├─ item 1  ← sibling
├─ item 2  ← sibling
├─ item 3  ← start (excluded)
├─ item 4  ← sibling
└─ item 5  ← sibling

.next() / .prev()     → one neighbor
.nextAll() / .prevAll() → one direction
.siblings()           → both directions, minus self
NeedPrefer
All peers (both sides)$("el").siblings()
Next / previous only.next() / .prev()
One direction, many.nextAll() / .prevAll()
Approach

How to Use .siblings()

Start from one (or more) elements, then collect peers under the same parent.

  1. Select the starting element(s): $("li.third-item").
  2. Call .siblings() for all peers, or .siblings("sel") to filter.
  3. Remember: the start element is never included.
  4. For multi-start exclusive peers, use .siblings().not($collection).
PieceRequired?Role
Starting setYesElements whose peers are collected
SelectorOptionalKeeps only matching siblings
Self—Always excluded from the result

Pseudocode

Pseudocode
starts = current jQuery set
result = empty

for each el in starts:
    for each sibling of el (same parent, not el):
        if no selector or sibling matches selector:
            keep sibling

return jQuery(result)   // unique nodes; starts not included as "self"
Reference

Cheat Sheet

Keep these facts handy while collecting siblings.

TopicDetail
Syntax.siblings( [selector] )
DirectionBoth sides (before and after)
Includes self?No
vs .next() / .prev()All peers vs one neighbor
vs .nextAll() / .prevAll()Both directions vs one
Exclusive peers.siblings().not($collection)
SincejQuery 1.0
Try it

Live Preview

Start at li.third-item and compare sibling methods on a five-item list.

Official pattern: from item 3, .siblings() returns items 1, 2, 4, and 5 — not 3.

Result
$("li.third-item").siblings()
matched: 4
text: list item 1, list item 2, list item 4, list item 5

/* self (item 3) excluded */
Code

jQuery Examples

Short, copy-ready snippets. Open a browser console with jQuery loaded, or use Try It Yourself for a live editor.

Example 1 — Official: $("li.third-item").siblings()

Get every sibling of the third list item (jQuery API example).

jQuery
var $hits = $("li.third-item").siblings();
console.log($hits.length);
console.log($hits.map(function () {
  return this.textContent.trim();
}).get().join(", "));
Try It Yourself

How It Works

  1. Start at item 3. $("li.third-item") is the root.
  2. Collect peers. Same parent ul, both directions.
  3. Skip self. Item 3 is not in the result.
  4. Four matches. Items 1, 2, 4, and 5.

Example 2 — Filter: .siblings(".selected")

Keep only siblings that match a selector (official pattern).

jQuery
var $hits = $("p.start").siblings(".selected");
console.log($hits.length);
console.log($hits.map(function () {
  return this.textContent.trim();
}).get().join(", "));
Try It Yourself

How It Works

  1. Start at p.start. One paragraph in a group.
  2. List all siblings. Other p (and any peer tags) under the parent.
  3. Filter. .selected keeps only marked peers.
  4. Skip non-matches. Unmarked siblings are dropped.

Example 3 — vs .next() and .prev()

One neighbor each way versus all peers.

jQuery
var $el = $("li.third-item");
console.log("siblings:", $el.siblings().map(function () {
  return this.textContent.trim();
}).get().join(", "));
console.log("next:", $el.next().text().trim());
console.log("prev:", $el.prev().text().trim());
Try It Yourself

How It Works

  1. .siblings(). Four peers on both sides.
  2. .next(). Immediate following item only.
  3. .prev(). Immediate preceding item only.
  4. Pick by need. See .next() / .prev().

Example 4 — vs .nextAll() / .prevAll()

Both directions combined versus one direction each.

jQuery
var $el = $("li.third-item");
console.log("siblings:", $el.siblings().length);
console.log("nextAll:", $el.nextAll().map(function () {
  return this.textContent.trim();
}).get().join(", "));
console.log("prevAll:", $el.prevAll().map(function () {
  return this.textContent.trim();
}).get().join(", "));
Try It Yourself

How It Works

  1. .siblings(). Count is 4 (both sides).
  2. .nextAll(). Only items after the start.
  3. .prevAll(). Only items before (document order may reverse listing).
  4. Same peers, split. nextAll + prevAll cover the sibling set.

Example 5 — Exclusive: .siblings().not($collection)

When starts are mutual siblings, strip them out of the peer list.

jQuery
var $hilite = $(".hilite");
var $plain = $hilite.siblings();
var $exclusive = $hilite.siblings().not($hilite);

console.log("starts:", $hilite.length);
console.log("plain siblings:", $plain.map(function () {
  return this.textContent.trim();
}).get().join(", "));
console.log("exclusive:", $exclusive.map(function () {
  return this.textContent.trim();
}).get().join(", "));
Try It Yourself

How It Works

  1. Two starts. One and Four both have class hilite.
  2. Plain .siblings(). Unique merge includes One and Four (each is a sibling of the other).
  3. .not($hilite). Drops the original starts → Two and Three only.
  4. Exclusive peers. Official tip for multi-element starts.

Edge Cases & Pitfalls

Check these before relying on .siblings() in real projects.

self

Start element excluded

The matched element is never returned as its own sibling — easy to forget when counting “everyone at this level.”

multi

Mutual siblings in the start set

Official docs: if the collection has multiple mutual siblings, they can appear in each other’s results. Use .not($collection) for exclusive peers.

text

Element siblings only

.siblings() returns element nodes, not text nodes between tags.

scope

Same parent only

Cousins under a different parent are not siblings. Scope starts carefully in nested lists.

Compatibility

Browser Support

.siblings() is a core jQuery traversing method available since 1.0. It works wherever jQuery runs.

✓ jQuery 1.0+ · Core API

jQuery .siblings()

Works in all browsers with jQuery. Optional selector filters the peer set.

100% jQuery environments
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
.siblings() Core method

Bottom line: Safe to use for same-parent peers; remember self is excluded and multi-starts may need .not($collection).

Analysis

Performance Notes

ApproachCostBest for
$("#id").siblings()Small peer listTypical UI work
$("li").siblings()Many starts × peersAvoid on huge lists
.siblings("sel")Peers + filterWhen you only need some peers

Prefer a single, specific start when you can. Wide starts that are mutual siblings also inflate the result — filter early with a selector or .not().

Remember

Key Takeaways

  • Role: get all same-parent peers, excluding self.
  • Both sides: unlike .nextAll() / .prevAll() alone.
  • Filter: pass a selector to keep matching siblings only.
  • Multi-start: use .not($collection) for exclusive peers.

One line: .siblings() means “everyone else under my parent” — both directions, never myself.

Frequently Asked Questions

.siblings() returns every sibling of each element in the current set — elements that share the same parent, excluding the element itself. An optional selector filters which siblings are kept. Available since jQuery 1.0.
.next() and .prev() return at most one immediate neighbor. .siblings() returns all siblings on both sides. From list item 3, .next() is item 4 only; .siblings() is items 1, 2, 4, and 5.
.nextAll() is only following siblings; .prevAll() is only preceding. .siblings() combines both directions (minus self).
No. The matched element is never in the result. Official demo from item 3 styles 1, 2, 4, and 5 — not 3.
When the starting set has multiple mutual siblings, plain .siblings() can return members of the original set. Chain .not($collection) for an exclusive list of other siblings only.
Yes. Pass a selector: $("p").siblings(".selected") keeps only sibling elements that match .selected.

Next: .not() Method

Remove elements from a set — useful after .siblings() for exclusive peers.

.not() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

jQuery .prevUntil() Method jQuery .not() Method