jQuery Traversing: Siblings

Navigating between sibling elements in the DOM is a common task in web development. Siblings are elements that share the same parent, and jQuery offers several methods to traverse and interact with them efficiently.

At The Coding College, we’ll explore how to use jQuery methods to traverse siblings and enhance your DOM manipulation skills.

What are Siblings in the DOM?

Siblings are elements at the same level in the DOM tree, sharing the same immediate parent.

For example:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

In this case, <li>Item 1</li>, <li>Item 2</li>, and <li>Item 3</li> are siblings because they share the same parent <ul>.

Sibling Traversing Methods

1. siblings() Method

The siblings() method selects all sibling elements of the current element.

Syntax

$(selector).siblings(filter);

• filter (optional): A selector to filter the matched siblings.

Example

<ul>
    <li class="active">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<script>
    $(".active").siblings().css("color", "blue");
    // Changes the color of Item 2 and Item 3
</script>

2. next() Method

The next() method selects the immediate next sibling of the current element.

Syntax

$(selector).next(filter);

Example

<ul>
    <li class="active">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<script>
    $(".active").next().css("font-weight", "bold");
    // Makes Item 2 bold
</script>

3. nextAll() Method

The nextAll() method selects all subsequent siblings of the current element.

Syntax

$(selector).nextAll(filter);

Example

<ul>
    <li class="active">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<script>
    $(".active").nextAll().css("background-color", "lightgray");
    // Applies a background color to Item 2 and Item 3
</script>

4. nextUntil() Method

The nextUntil() method selects all subsequent siblings up to (but not including) a specified element.

Syntax

$(selector).nextUntil(selector);

Example

<ul>
    <li class="active">Item 1</li>
    <li>Item 2</li>
    <li class="stop">Item 3</li>
    <li>Item 4</li>
</ul>
<script>
    $(".active").nextUntil(".stop").css("border", "1px solid red");
    // Highlights Item 2
</script>

5. prev() Method

The prev() method selects the immediate previous sibling of the current element.

Example

<ul>
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
</ul>
<script>
    $(".active").prev().css("color", "green");
    // Changes the color of Item 1
</script>

6. prevAll() Method

The prevAll() method selects all preceding siblings of the current element.

Example

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="active">Item 3</li>
</ul>
<script>
    $(".active").prevAll().css("text-decoration", "underline");
    // Underlines Item 1 and Item 2
</script>

7. prevUntil() Method

The prevUntil() method selects all preceding siblings up to (but not including) a specified element.

Example

<ul>
    <li>Item 1</li>
    <li class="stop">Item 2</li>
    <li class="active">Item 3</li>
</ul>
<script>
    $(".active").prevUntil(".stop").css("font-style", "italic");
    // Applies italics to Item 2
</script>

Practical Use Cases

1. Highlight Sibling Menu Items

$(".active").siblings().addClass("inactive");

2. Style Subsequent Siblings

$(".highlight").nextAll().css("opacity", "0.5");

3. Traverse Between Specific Elements

$(".start").nextUntil(".end").css("border", "2px dashed blue");

Key Differences Between Methods

Conclusion

jQuery’s sibling-traversing methods—siblings(), next(), prev(), and their variations—allow for precise navigation and manipulation of sibling elements in the DOM. These methods simplify dynamic interactions like highlighting menu items, toggling visibility, and styling related elements.