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 class b 是 div class c 和 div class c 的兄弟 div，div class c 是 div class d 的父级。

重要的是 javascript 引用他们的父母或兄弟姐妹，因为 div 类 a（容器）将被重复多次，并且 div 类 b 和 d 的每个不同实例都应该在点击时打开不同的 div，而不是全部打开所有具有 div 类的实例C。

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

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

- 但实际上我认为这只会寻找特定 div 的孩子，这真的不是我想要的，因为我正在寻找指示兄弟姐妹和父母。任何知道如何做到这一点的人都可以为我指明正确的方向吗？

score 1 · Accepted Answer

您可以通过 jQuery 的.sibling()方法访问兄弟姐妹：

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

对于更精确的兄弟选择，您可以使用.prev('.c')或.next('.c')。

还有一个由波浪号表示的通用兄弟选择器~：

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

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

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

score 0 · Accepted Answer

您是否尝试过使用 jquery 的 .parent() 函数？

$('div.d').parent().click(function(){
  console.log($(this).text());
});

2 回答 2