.siblings()

Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

.siblings(selector)🡢 jQuery

selector SelectorA string containing a selector expression to match elements against.

Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.

The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Consider a page with a simple list on it:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

If we begin at the third item, we can find its siblings:

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

The result of this call is a red background behind items 1, 2, 4, and 5. Since we do not supply a selector expression, all of the siblings are part of the object. If we had supplied one, only the matching items among these four would be included.

The original element is not included among the siblings, which is important to remember when we wish to find all elements at a particular level of the DOM tree. However, if the original collection contains more than one element, they might be mutual siblings and will both be found. If you need an exclusive list of siblings, use $collection.siblings().not($collection).

Find the unique siblings of all yellow li elements in the 3 lists (including other yellow li elements if appropriate).

JS
<ul>
  <li>One</li>
  <li>Two</li>
  <li class="hilite">Three</li>
  <li>Four</li>
</ul>

<ul>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
</ul>

<ul>
  <li>Eight</li>
  <li class="hilite">Nine</li>
  <li>Ten</li>
  <li class="hilite">Eleven</li>
</ul>

<p>Unique siblings: <b></b></p>
CSS
ul {
  float: left;
  margin: 5px;
  font-size: 16px;
  font-weight: bold;
}
p {
  color: blue;
  margin: 10px 20px;
  font-size: 16px;
  padding: 5px;
  font-weight: bolder;
}
.hilite {
  background: yellow;
}
HTML
var len = $(".hilite").siblings().css("color", "red").length;
$("b").text(len);
DEMO

Find all siblings with a class "selected" of each div.

JS
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
HTML
$("p").siblings(".selected").css("background", "yellow");
DEMO

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)