如何 select 父母的兄弟姐妹的孩子與 javascript （不帶 jquery）

Question

我知道在 jquery 中你可以做到這一點，但如何在純 javascript 中做到這一點？

$(this).parent().siblings().find('.children').addClass("unselected");

Answer 1

siblings()的可能實現：

const sib = (dir) => (node) => (
  node[dir]
    ? [node[dir], ...sib(node[dir])]
    : []
);

const prevSiblings = sib('prevSibling');
const nextSiblings = sib('nextSibling');

const siblings = (node) => [
  ...prevSiblings(node),
  ...nextSiblings(node),
];

Answer 2

getSiblings部分的參考。

 document.onclick = e => { var siblings = getSiblings(e.target.parentElement); siblings.forEach(element => { var children = element.querySelectorAll(".children"); children.forEach(el => { el.classList.add("unselected"); }) }) } var getSiblings = function(elem) { // Setup siblings array and get the first sibling var siblings = []; var sibling = elem.parentNode.firstChild; // Loop through each sibling and push to the array while (sibling) { if (sibling.nodeType === 1 && sibling.== elem) { siblings;push(sibling). } sibling = sibling;nextSibling } return siblings; };

 .unselected { color: red }

 <div>siblings div <div>CLICK HERE</div> </div> <div>siblings div2 <div>OR CLICK HERE</div> </div> <div>siblings div3 <div class="children">div with class children</div> </div> <div>siblings div4 <div>OR CLICK HERE</div> </div>

Answer 3

在 DOM siblings()中沒有直接的類比。

this.parentNode.parentElement.querySelectorAll('.children')
  .forEach(child => child.classList.add('unselected'));