Materi
Roadmap
Proyek
Sertifikat
Skillance Code Lab
Jalankan »
Skillance Code Lab Editor
Editor
Hasil
Split
Editor Kode Sumber
Tekan
Ctrl + Enter
untuk Menjalankan
<!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>
Hasil Tampilan (Browser Preview)
Muat Ulang