Explain sibling in jquery with example

In jQuery, the siblings() method is used to get all sibling elements of each element in the set of matched elements, optionally filtered by a selector. Sibling elements are those that share the same parent.

Basic Usage

The syntax for the siblings() method is:

$(selector).siblings([filter])

selector: Specifies the current element.
filter (optional): A selector expression to narrow down the matched siblings.

Example

Let's say we have the following HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Siblings Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            // Select the element with id 'item2' and find its siblings
            $("#item2").siblings().css("background-color", "yellow");

            // Select the element with id 'item2' and find its siblings with class 'highlight'
            $("#item2").siblings(".highlight").css("color", "red");
        });
    </script>
</head>
<body>
    <ul>
        <li id="item1">Item 1</li>
        <li id="item2">Item 2</li>
        <li id="item3" class="highlight">Item 3</li>
        <li id="item4" class="highlight">Item 4</li>
        <li id="item5">Item 5</li>
    </ul>
</body>
</html>

Explanation

$("#item2").siblings().css("background-color", "yellow");
- This selects the element with the ID item2 and applies a yellow background color to all of its siblings (item1, item3, item4, and item5).
$("#item2").siblings(".highlight").css("color", "red");
- This selects the element with the ID item2 and applies a red text color to its siblings that have the class highlight (item3 and item4).

Output

When the page loads, the resulting visual changes will be:

item1, item3, item4, and item5 will have a yellow background.
item3 and item4 will have red text.

This demonstrates how the siblings() method can be used to select and manipulate sibling elements in the DOM using jQuery.

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Chlid

Next: Filtering Elements

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.