jQuery Siblings

Siblings are components that share the same parent in logical connections. To move sideways in the DOM tree, jQuery offers numerous methods such as siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), and prevUntil().

jQuery siblings() Method

To retrieve the sister elements of the specified element, use the jQuery siblings() function. The following example uses the class to highlight the siblings of the <p> element, which are <h1> and <ul>. highlight on document ready.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select All the Sibling Elements</h1>
<div class="box">
    <div style="width:300px;">
        <h2>h2</h2>
        <p>p</p>
        <span>span</span>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("p").siblings().css({"color": "#00ab55", "border": "2px solid #00ab55"});
    });
</script>
</body>
</html>

Preview

You can optionally pass one or more selectors as parameters to the siblings() function to narrow down your search for siblings. The border surrounding the siblings of the <p> that are <ul> elements will only be applied in the following example.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select the Specific Sibling Elements</h1>
<div class="box">
    <div style="width:300px;">
        <h2>h2</h2>
        <p>p</p>
        <span>span</span>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("h2").siblings("p").css({"color": "#ff4842", "border": "2px solid #ff4842"});
    });
</script>
</body>
</html>

Preview

jQuery next() Method

The jQuery next() function is used to fetch the element's immediately following sibling, i.e. the next sibling element. The <ul> element is the <p> element's next sibling.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select the Next Sibling Element</h1>
<div class="box">
    <div style="width:300px;">
        <h2>h2</h2>
        <p>p</p>
        <span>span</span>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("h2").next().css({"color": "#ffc107", "border": "2px solid #ffc107"});
    });
</script>
</body>
</html>

Preview

jQuery nextAll() Method

The jQuery nextAll() function returns all siblings of the specified element. The example below will highlight all siblings of the <p> element that comes after it.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select All the Sibling Elements</h1>
<div class="box">
    <div style="width:300px;">
        <h2>h2</h2>
        <p>p</p>
        <span>span</span>
        <ul>ul
            <li>li</li>
        </ul>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("h2").nextAll().css({"color": "#1890ff", "border": "2px solid #1890ff"});
    });
</script>
</body>
</html>

Preview

jQuery nextUntil() Method

The jQuery nextUntil() function returns all siblings up to but excluding the element matched by the selection. In a nutshell, it retrieves all the next siblings items in a DOM hierarchy between two supplied components. The following example will highlight all of the <h1> element's siblings except the <ul> element, i.e. highlight both the <p> element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select All Siblings between Two Elements</h1>
<div class="box">
    <div style="width:300px;">
        <h2>h2</h2>
        <p>p</p>
        <span>span</span>
        <ul>ul
            <li>li</li>
        </ul>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("h2").nextUntil("ul").css({"color": "#00ab55", "border": "2px solid #00ab55"});
    });
</script>
</body>
</html>

Preview

jQuery prev() Method

The jQuery prev() function is used to acquire the chosen element's immediately preceding sibling, i.e. the previous sibling element. The preceding sibling of the <ul> element, the <p> element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select the Previous Sibling Element</h1>
<div class="box">
    <div style="width:300px;">
        <h2>h2</h2>
        <p>p</p>
        <span>span</span>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("p").prev().css({"color": "#ff4842", "border": "2px solid #ff4842"});
    });
</script>
</body>
</html>

Preview

jQuery prevAll() Method

The jQuery prevAll() function returns all siblings of the specified element. The example below will highlight all siblings of the <ul> element that comes before this.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select All the Previous Sibling Elements</h1>
<div class="box">
    <div style="width:300px;">
        <h2>h2</h2>
        <p>p</p>
        <span>span</span>
        <ul>ul
            <li>li</li>
        </ul>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("span").prevAll().css({"color": "#ffc107", "border": "2px solid #ffc107"});
    });
</script>
</body>
</html>

Preview

jQuery prevUntil() Method

The jQuery prevUntil() function returns all siblings preceding but not including the element matched by the selector. In a nutshell, it retrieves all the preceding siblings items in a DOM hierarchy between two supplied components. The following example will highlight all of the <ul> element's prior sibling elements except the <h1> element, highlighting both the <p> element.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box * {
            display: block;
            border: 2px solid #f2f3f5;
            color: #212b36;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>

<h1>Select All the Previous Sibling Elements</h1>
<div class="box">
    <div style="width:300px;">
        <h2>h2</h2>
        <p>p</p>
        <span>span</span>
        <ul>ul
            <li>li</li>
        </ul>
    </div>
</div>

<script>
    $(document).ready(function(){
        $("span").prevUntil().css({"color": "#1890ff", "border": "2px solid #1890ff"});
    });
</script>
</body>
</html>

Preview

jQuery Descendants

jQuery Filtering

jQuery Siblings

jQuery siblings() Method

Example

Example

jQuery next() Method

Example

jQuery nextAll() Method

Example

jQuery nextUntil() Method

Example

jQuery prev() Method

Example

jQuery prevAll() Method

Example

jQuery prevUntil() Method

Example

Links

Tutorials

Connect with us