如何使用 JavaScript 獲取元素的所有兄弟姐妹

在上一篇文章中，我們研究瞭如何在 JavaScript 中獲取元素的下一個和上一個兄弟元素。

如果你想選擇全部怎麼辦 一個元素的兄弟姐妹？

假設您有以下 HTML 列表：

<ul>
    <li>🍔</li>
    <li>🍕</li>
    <li id="drink">🍹</li>
    <li>🍲</li>
    <li>🍩</li>
</ul>

我們想得到 #drink 元素，然後定位它的所有兄弟元素。

以下幫助函數將元素作為輸入並返回其所有兄弟元素：

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));

// 🍔
// 🍕
// 🍲
// 🍩

以下是它的工作原理：

1. 獲取我們要查找的兄弟元素的父元素。
2. 在該父元素中查找第一個子元素。
3. 將第一個元素子元素添加到兄弟元素數組中。
4. 選擇第一個元素的下一個同級元素。
5. 最後，重複第 3 步和第 4 步，直到沒有兄弟姐妹。如果兄弟元素是原始元素，請跳過第 3 步。

過濾兄弟姐妹

有時，您可能想要過濾掉元素的兄弟姐妹。例如，您可能希望獲取作為錨鏈接的節點的所有兄弟節點（<a> )。

為此，您可以將可選的文件管理器函數傳遞給輔助函數，如下所示：

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;
};

以下示例演示瞭如何使用 siblings() 輔助函數來獲取錨元素的所有兄弟元素，它們也是錨節點：

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));

空格和註釋

上面的輔助函數依賴於 nextElementSibling 通過忽略空格和註釋返回下一個元素節點的屬性。

如果您想獲取所有兄弟姐妹，包括空格和註釋，請使用 nextSibling 而是財產。它返回下一個兄弟節點，可能是文本節點（空格）或註釋節點。

瀏覽器兼容性

上面的輔助函數應該可以在所有現代瀏覽器和 IE9 及更高版本中運行。