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

Question

How can target class="a-2" inside id="b" by clicking on class="a-1" also inside id="b"?

<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

You can always go through the parent:

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

Answer 2

You can select all sibling nodes by selecting all children of the parent of the clicked node and then filter out the node that is clicked.

 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>