jQuery Siblings

In jQuery, siblings are elements that share the same parent. The library provides methods to select and manipulate sibling elements efficiently.

1. Selecting Siblings

The main jQuery methods to work with siblings are:

  1. .siblings()
    Selects all siblings of the current element (excluding the element itself).
  2. .next()
    Selects the immediate next sibling of the current element.
  3. .nextAll()
    Selects all following siblings after the current element.
  4. .prev()
    Selects the immediate previous sibling of the current element.
  5. .prevAll()
    Selects all preceding siblings before the current element.
  6. .nextUntil() and .prevUntil()
    Select siblings until a specific element or selector is reached.

2. Examples

HTML Structure:

<div id="container">
  <p id="first">First Paragraph</p>
  <p id="second">Second Paragraph</p>
  <p id="third">Third Paragraph</p>
  <p id="fourth">Fourth Paragraph</p>
</div>

Try It Now

jQuery Examples:

  1. Select All Siblings: 
    $("#second").siblings().css("color", "blue");

    Try It Now

    This changes the color of <p id="first">, <p id="third">, and <p id="fourth"> to blue.

     

  2. Select Next Sibling: 
    $("#second").next().css("font-weight", "bold");

    Try It Now

    This makes the text of <p id="third"> bold.

     

  3. Select All Following Siblings: 
    $("#second").nextAll().css("background-color", "yellow");

    Try It Now

    This changes the background color of <p id="third"> and <p id="fourth"> to yellow.

     

  4. Select Previous Sibling: 
    $("#second").prev().css("text-decoration", "underline");

    Try It Now

     

  5. Select All Preceding Siblings: 
    $("#third").prevAll().css("color", "green");

    Try It Now

    This changes the color of <p id="first"> and <p id="second"> to green.

     

  6. Select Siblings Until a Specific Element: 
    $("#second").nextUntil("#fourth").css("border", "1px solid red");

    Try It Now

    This adds a red border to <p id="third"> (all siblings after #second but before #fourth).

     

3. Practical Example

Here’s a complete example to try out:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Siblings</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="container">
    <p id="first">First Paragraph</p>
    <p id="second">Second Paragraph</p>
    <p id="third">Third Paragraph</p>
    <p id="fourth">Fourth Paragraph</p>
  </div>

  <script>
    // Highlight all siblings of #second
    $("#second").siblings().css("color", "blue");

    // Highlight the next sibling of #second
    $("#second").next().css("font-weight", "bold");

    // Highlight all previous siblings of #third
    $("#third").prevAll().css("background-color", "lightgray");
  </script>
</body>
</html>

Try It Now

Key Points:

  • Siblings share the same parent.
  • Use methods like .siblings(), .next(), .prev(), .nextAll(), and .prevAll() for various sibling operations.
  • Combine these methods with CSS or DOM manipulation for dynamic effects.