siblings, next, nextAll, nextUntil, prev, prevAll, prevUntil Methods in jQuery Siblings Traversing Methods

August 28, 2024

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Siblings_Methods.css">
    <title>Siblings Methods</title>
</head>

<body>
    <h1>jQuery Siblings Methods</h1>

    <div id="outer">
        <h2>Outer</h2>
        <div id="inner">
            <h2 id="child-head">Inner</h2>
            <div class="box">A</div>
            <div class="box">B</div>
            <div class="box" id="child-C">C</div>
            <div class="box">D</div>
            <div class="test">E</div>
        </div>
    </div>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        // jQuery Siblings Traversing Methods : siblings(),next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil()
        $(document).ready(function () {
            $("#child-C").siblings().css("background", "#ff0000");
            // $("#child-C").siblings("h2").css("background","#ff0000");
            // $("#child-C").siblings(".box").css("background","#ff0000");

            // $("#child-C").next().css("background","#ff0000");
            // $("#child-C").prev().css("background","#ff0000");
            // $("#child-C").prevAll().css("background","#ff0000");
            // $("#child-C").nextAll().css("background","#ff0000");
            // $("#child-C").nextUntil(".test").css("background","#ff0000");
            // $("#child-C").prevUntil(".box").css("background","#ff0000");
        });
    </script>
</body>

</html>





Below File is css/Siblings_Methods.css File.
#main-outer {
    background: #c6c8f2;
    margin: 10px;
    width: 500px;
    height: 380px;
    border: 1px solid #000000;
    padding: 10px;
}

#outer {
    background: #ffe2ad;
    width: 580px;
    height: 280px;
    border: 1px solid #000000;
    padding: 10px;
}

#inner {
    background: #ffc0cb;
    width: 550px;
    height: 180px;
    border: 1px solid #000000;
    padding: 10px;
}

#child-C {
    background: #87ceeb;
    width: 80px;
    height: 100px;
    border: 1px solid #000000;
    margin: 10px 10px;
    justify-content: center;
    align-items: center;
}

.box {
    background: #87ceeb;
    display: inline-block;
    width: 80px;
    height: 100px;
    margin: 10px;
    border: 1px solid #000000;
    text-align: center;
}

.test {
    background: #87ceeb;
    display: inline-block;
    width: 80px;
    height: 100px;
    margin: 10px;
    border: 1px solid #000000;
    text-align: center;
}