Dalam konteks latihan ini, metode .siblings() mengembalikan semua saudara kandung dari suatu elemen, tetapi bagaimana kita dapat menargetkan elemen saudara tertentu?
Menjawab
Ada beberapa cara untuk menargetkan elemen saudara tertentu saat menggunakan fungsi .children()
Salah satu caranya adalah dengan meneruskan pemilih, seperti nama kelas, sehingga hanya saudara kandung yang cocok dengannya yang akan dikembalikan. Sebagai contoh, berikut ini hanya akan mengembalikan elemen saudara dengan kelas “target-class”
$("li").siblings(".target-class");Cara lain Anda dapat menargetkan elemen saudara tertentu adalah dengan memilihnya satu per satu, dengan indeks dari objek jQuery yang berisi semua saudara kandung. Misalnya, diberi kode HTML,
Pada artikel sebelumnya, kita melihat bagaimana cara mendapatkan turunan berikutnya dan sebelumnya dari sebuah elemen di JavaScript
Bagaimana jika Anda ingin memilih semua saudara dari suatu elemen?
Katakanlah Anda memiliki daftar HTML berikut
<ul> <li>🍔</li> <li>🍕</li> <li id="drink">🍹</li> <li>🍲</li> <li>🍩</li> </ul> _Kami ingin mendapatkan elemen #drink, dan kemudian mencari semua elemen saudaranya
Fungsi pembantu berikut mengambil sebuah elemen sebagai input dan mengembalikan semua saudara kandungnya
const siblings = (elem) => { // create an empty array let siblings = []; // if no parent, return empty list if (!elem.parentNode) { return siblings; } // first child of the parent node let sibling = elem.parentNode.firstElementChild; // loop through next siblings until `null` do { // push sibling to array if (sibling != elem) { siblings.push(sibling); } } while (sibling = sibling.nextElementSibling); return siblings; }; const drink = document.querySelector('#drink'); // get all all siblings const nodes = siblings(drink); nodes.forEach(li => console.log(li.innerText)); // 🍔 // 🍕 // 🍲 // 🍩Inilah cara kerjanya
- Dapatkan induk dari elemen yang saudara kandungnya ingin kita temukan
- Temukan anak elemen pertama di dalam elemen induk itu
- Tambahkan anak elemen pertama ke array saudara kandung
- Pilih saudara berikutnya dari elemen pertama
- Terakhir, ulangi langkah ke-3 dan ke-4 hingga tidak ada saudara kandung yang tersisa. Jika saudara kandung adalah elemen asli, lewati langkah ke-3
Saring saudara
Terkadang, Anda mungkin ingin memfilter saudara dari suatu elemen. Misalnya, Anda mungkin ingin mendapatkan semua saudara dari sebuah simpul yang merupakan tautan jangkar (<a>)
Untuk melakukan ini, Anda dapat meneruskan fungsi filer opsional ke fungsi pembantu seperti yang ditunjukkan di bawah ini
Contoh berikut menunjukkan bagaimana Anda dapat menggunakan fungsi pembantu siblings() untuk mendapatkan semua saudara dari elemen jangkar, yang juga merupakan simpul jangkar
const anchor = document.querySelector('a.current'); // get all anchor links const links = siblings(anchor, (e) => { return e.nodeName.toLowerCase() === 'a'; }); links.forEach(a => console.log(a.href)); _Ruang putih dan komentar
Fungsi pembantu di atas bergantung pada properti nextElementSibling yang mengembalikan node elemen berikutnya dengan mengabaikan spasi dan komentar
Jika Anda ingin mendapatkan semua saudara, termasuk spasi dan komentar, gunakan properti nextSibling sebagai gantinya. Ini mengembalikan simpul saudara berikutnya yang mungkin berupa simpul teks (spasi) atau simpul komentar