jQuery Traversing

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; background: #f8fafc; }
        .family-box { border: 2px solid #cbd5e1; padding: 15px; margin: 10px 0; border-radius: 8px; background: white; }
        .parent { border-color: #0d2e5c; }
        .child { display: inline-block; padding: 10px 15px; margin: 5px; background: #e0f2fe; border-radius: 6px; }
        .active-highlight { background-color: #fca311 !important; color: #0d2e5c !important; font-weight: bold; }
        button { background: #00758f; color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; margin-right: 5px; }
    </style>
</head>
<body>
    <h3>Pohon Silsilah DOM jQuery</h3>
    <div class="family-box parent" id="indukKotak">
        <strong>Elemen Induk (#indukKotak)</strong>
        <div style="margin-top: 10px;">
            <div class="child" id="anak1">Anak 1</div>
            <div class="child" id="anak2">Anak 2 (Pusat)</div>
            <div class="child" id="anak3">Anak 3</div>
        </div>
    </div>

    <div style="margin-top: 15px;">
        <button id="btnParent">Cari Induk (.parent)</button>
        <button id="btnSiblings">Cari Saudara (.siblings)</button>
        <button id="btnChildren">Cari Semua Anak (.children)</button>
        <button id="btnReset" style="background:#64748b;">Reset</button>
    </div>

    <script>
        $(document).ready(function() {
            $('#btnParent').click(function() {
                $('.child, .family-box').removeClass('active-highlight');
                $('#anak2').parent().addClass('active-highlight');
            });
            $('#btnSiblings').click(function() {
                $('.child, .family-box').removeClass('active-highlight');
                $('#anak2').siblings().addClass('active-highlight');
            });
            $('#btnChildren').click(function() {
                $('.child, .family-box').removeClass('active-highlight');
                $('#indukKotak').children('div').children().addClass('active-highlight');
            });
            $('#btnReset').click(function() {
                $('.child, .family-box').removeClass('active-highlight');
            });
        });
    </script>
</body>
</html>