Как выбрать детей родных братьев и сестер с 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 part.

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

Прямого аналога siblings() в DOM API нет.

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