jQuery Introduction | Traversing Elements | Traversing Sibling Elements .siblings() .next() .prev()

Selecting Sibling Elements

Methods for selecting sibling elements of a specific element in the DOM tree, that is, elements on the same level, are as follows.

.siblings() Method

The .siblings() method selects all sibling elements of the selected element that match the specified selector.

When HTML elements exist as follows:

<ul>ul (parent)
  <li>li (sibling)</li>
  <li>li (sibling)</li>
  <li class="me">li (me)</li>
  <li>li (sibling)</li>
  <li>li (sibling)</li>
</ul>

Select all elements on the same level as the element with class me and change their CSS style.

$(".me").siblings().css({"border": "2px solid red"});

Run code

.next() Method

The .next() method selects the sibling element immediately after the selected element.

Select one sibling element immediately after the element with class me and change its CSS style.

$(".me").next().css({"border": "2px solid red"});

Run code

.nextAll() Method

The .nextAll() method selects all sibling elements after the selected element. You can also pass a selector as an argument to select only sibling elements that match the selector.

Select all sibling elements after the element with class me and change their CSS style.

$(".me").nextAll().css({"border": "2px solid red"});

Run code

.nextUntil() Method

The .nextUntil() method selects all sibling elements of the selected element up to, but not including, the element matching the selector passed as an argument. If no selector is passed as an argument, it selects all sibling elements after the selected element, just like .nextAll().

Select all sibling elements after the element with class me up to immediately before the last <li> element and change their CSS style.

$(".me").nextUntil("li:last").css({"border": "2px solid red"});

Run code

.prev() Method

The .prev() method selects elements in the opposite direction from .next().

Select one sibling element immediately before the element with class me and change its CSS style.

$(".me").prev().css({"border": "2px solid red"});

Run code

.prevAll() Method

The .prevAll() method selects elements in the opposite direction from .nextAll().

Select all sibling elements before the element with class me and change their CSS style.

$(".me").prevAll().css({"border": "2px solid red"});

Run code

.prevUntil() Method

The .prevUntil() method selects elements in the opposite direction from .nextUntil().

Select all previous sibling elements of the element with class me up to immediately before the first <li> element and change their CSS style.

$(".me").prevUntil("li:first").css({"border": "2px solid red"});

Run code