Bagaimana Anda menargetkan saudara kandung dalam javascript?

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

1. Dapatkan induk dari elemen yang saudara kandungnya ingin kita temukan
2. Temukan anak elemen pertama di dalam elemen induk itu
3. Tambahkan anak elemen pertama ke array saudara kandung
4. Pilih saudara berikutnya dari elemen pertama
5. 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

const siblings = (elem, filter) => {
    // 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 && (!filter || filter(sibling))) {
            siblings.push(sibling);
        }
    } while (sibling = sibling.nextElementSibling);

    return siblings;
};

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

Bagaimana cara mendapatkan saudara berikutnya dalam JavaScript?

Apa yang saudara lakukan di JavaScript?

Bagaimana cara mendapatkan saudara terakhir di JavaScript?

Metode mana yang dapat digunakan untuk mengakses saudara dari sebuah node?