close

JQuery的siblings很好用,但假設不使用JQ的情況下要怎麼呈現呢
使用原生JS:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li id="find-me">Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
</ul>
<script>
    let getSiblings = function (el) {
    //取出父層第一個子元素
    let sibling = el.parentNode.firstChild;
    //建立一個siblings空陣列
    let siblings = [];

    //如果有sibling子元素執行迴圈
    while (sibling) {
    //節點類型為元素節點 且 sibling不等於自己 就push到siblings
        if (sibling.nodeType === 1 && sibling != el) {
            siblings.push(sibling);
        }
        //找siblings下一個同層元素
        sibling = sibling.nextSibling;
    }
    //執行至無同層元素回傳至陣列
    return siblings;
    }
    const findme = document.getElementById('find-me');
    let siblings = getSiblings(findme);
    console.log(siblings);
</script>

參考資料:
Go Make Things

arrow
arrow
    文章標籤
    siblings javascript JQuery
    全站熱搜
    創作者介紹
    創作者 浣熊 的頭像
    浣熊

    前端生涯

    浣熊 發表在 痞客邦 留言(0) 人氣()