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

Question

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

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>