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>
使用原生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>
