如何在JavaScript中针对不同类名的兄弟姐妹？

Question

如何在id="b "内点击class="a-1 "也能锁定class="a-2"？

<div id="a">
    <div class="a-1"></div>
    <div class="a-2"></div>
</div>
<div id="b">
    <div class="b-1"></div>
    <div class="b-2"></div>
</div>
<div id="c">
    <div class="c-1"></div>
    <div class="c-2"></div>
</div>

Answer 1

你可以一直通过父节点。

element.parentNode.querySelector('.a-2')

Answer 2

你可以通过选择被点击节点的父节点的所有子节点，然后筛选出被点击的节点，就可以选择所有的兄弟姐妹节点。

const el = document.querySelectorAll('div > div');

const siblings = function(el) {
  const nodes = el.parentNode.children;
  return [...nodes].filter(node => node !== el)
}

el.forEach(function(e) {
  e.addEventListener('click', function() {
    siblings(this).forEach(node => {
      console.log(node.textContent)
    })
  })
})

<div id="a">
  <div class="a-1">a</div>
  <div class="b-2">b</div>
  <div class="c-2">c</div>
</div>
<div id="b">
  <div class="a-1">a</div>
  <div class="b-2">b</div>
</div>
<div id="c">
  <div class="a-1">a</div>
  <div class="b-2">b</div>
</div>