如何在 JavaScript 中定位具有不同类名的兄弟姐妹答案

【问题标题】：How to target siblings with different class name in JavaScript如何在 JavaScript 中定位具有不同类名的兄弟姐妹
【发布时间】：2020-05-23 14:28:29
【问题描述】：

如何通过在 id="b" 内单击 class="a-1" 来定位 id="b" 内的 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>

【问题讨论】：

您的代码中的.a-2 在哪里？
你的意思是---你怎么能通过点击 class="a-1" 来定位 id="b" 里面的 class="b-2" id="b"?，因为没有 class="a-2"
好点！ :D 我的意思是通过单击 .a-1 来定位 .b-2。都在#b内。谢谢！

标签： javascript class target siblings

【解决方案1】：

你总是可以通过父母：

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

【讨论】：

【解决方案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>

【讨论】：