javascript - 为 javascript/jquery 选择同级和父级 div

Question

嗨，这只是一个一般性问题。当制作 javascript/jquery 时，使用特定类来指定特定同级 div 或父 div 的最简单方法是什么。

场景是这样的

<div class="a">
<div class="b"> </div>
<div class="c">
<div class="d"> </div> 
</div>
</div>

我想点击 div class b 打开 div class c。我还想单击 div class d 关闭 div class c。 div 类 b 是 div 类 c 和 div 类 c 的同级 div，并且 div 类 c 是 div 类 d 的父级。

javascript 引用其 parent 或 sibling 非常重要，因为 div 类 a(容器)将重复多次，并且 div 类 b 和 d 的每个不同实例应在单击时打开不同的 div，而不是全部打开所有实例与 div 类 c.

到目前为止，我已经考虑过使用类似的东西

event.target.getElementsByTagName("div")[]

- 但实际上我认为这只寻找特定 div 的 child ，这确实不是我想要的，因为我正在寻找指示 sibling 和 parent 。任何知道如何做到这一点的人都可以指出我正确的方向吗？

Answer 1

您可以通过 jQuery 的 .sibling() 方法访问同级:

$(.b).click(function () {
  $(this).siblings('.c').addClass('open');
});

要进行更精确的同级选择，您可以使用 .prev('.c') 或 .next('.c')。

还有一个general sibling selector由波形符 ~ 表示:

$('.b ~ .c');
// or
document.querySelectorAll('.b ~ .c');

要在单击 .d 时关闭 .c，我将依赖事件冒泡:

$('.c').on('click', function (e) {
  if ($(e.target).is('.d')) $(this).removeClass('open');
});