Siblings traversal in jQuery involves navigating through elements that share the same parent element as the selected element. These methods are useful for selecting and manipulating elements that are on the same level within the DOM hierarchy.

Key Methods for Siblings Traversal

1. .siblings()

The .siblings() method selects all sibling elements of each element in the set of matched elements, except the element itself.

• Usage:

  $(selector).siblings(filter);
  

• Parameters:

  • filter (optional): A selector to filter the siblings that are returned.

• Example:

  <ul>
      <li class="active">Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
  </ul>
  

  $(".active").siblings().css("color", "red");
  

  • Result: All li elements that are siblings of the li with the class active (i.e., Item 2 and Item 3) will have red text.

Example with Filter:

$(".active").siblings(":nth-child(2)").css("color", "blue");

• Result: The second sibling (Item 2) will have blue text.

2. .next()

The .next() method selects the immediate next sibling of each element in the set of matched elements.

• Usage:

  $(selector).next(filter);
  

• Example:

  <div>First</div>
  <div>Second</div>
  <div>Third</div>
  

  $("div:first").next().css("background-color", "yellow");
  

  • Result: The div containing "Second" will have a yellow background.

3. .nextAll()

The .nextAll() method selects all following siblings of each element in the set of matched elements.

• Usage:

  $(selector).nextAll(filter);
  

• Example:

  $("div:first").nextAll().css("border", "1px solid blue");
  

  • Result: All div elements after the first one (i.e., "Second" and "Third") will have a blue border.

4. .prev()

The .prev() method selects the immediate previous sibling of each element in the set of matched elements.

• Usage:

  $(selector).prev(filter);
  

• Example:

  $("div:last").prev().css("font-weight", "bold");
  

  • Result: The div containing "Second" will have bold text.

5. .prevAll()

The .prevAll() method selects all preceding siblings of each element in the set of matched elements.

• Usage:

  $(selector).prevAll(filter);
  

• Example:

  $("div:last").prevAll().css("color", "green");
  

  • Result: All div elements before the last one (i.e., "First" and "Second") will have green text.

6. .nextUntil() and .prevUntil()

• .nextUntil(): Selects all siblings between the selected element and a specified selector that comes after it.
• .prevUntil(): Selects all siblings between the selected element and a specified selector that comes before it.

Usage:

$(selector).nextUntil(selector, filter);
$(selector).prevUntil(selector, filter);

• Example:

  $("div:first").nextUntil("div:last").css("background-color", "lightgray");
  

  • Result: All div elements between the first and last one will have a light gray background.

Practical Use Cases

1. Highlighting All Siblings

You can highlight all sibling elements except the selected one:

$(".selected").siblings().addClass("highlight");
// Adds the "highlight" class to all siblings of the element with the "selected" class

2. Styling the Next or Previous Sibling

Sometimes, you may want to apply a style to the next or previous sibling of an element:

$(".current-item").next().css("font-size", "18px");
// Increases the font size of the next sibling of the element with the "current-item" class

3. Selecting Multiple Siblings

You can select and manipulate multiple siblings that come after or before an element:

$(".current").nextAll().addClass("after-current");
// Adds the "after-current" class to all siblings that come after the element with the "current" class