如何点击.b元素时定位并隐藏其上方的.a容器？

嘿，这个需求其实很好解决，我给你提供两种常用的实现方式，你可以根据自己的技术栈来选：

原生JavaScript实现 #

这种方式不需要依赖任何库，纯原生就能搞定：

• 首先选中所有的.b元素，给每个元素绑定点击事件
• 在点击事件里，通过previousElementSibling获取当前.b元素的前一个元素类型的兄弟节点（它会自动跳过文本、注释这类非元素节点）
• 最后判断这个节点是否带有.a类，确认后隐藏它

代码示例：

// 选中所有.b元素
document.querySelectorAll('.b').forEach(element => {
  // 绑定点击事件
  element.addEventListener('click', function() {
    // 获取前一个元素兄弟节点
    const prevElement = this.previousElementSibling;
    // 验证节点存在且拥有.a类，避免误操作
    if (prevElement && prevElement.classList.contains('a')) {
      prevElement.style.display = 'none';
    }
  });
});

jQuery实现（如果项目中已引入jQuery） #

如果你正在使用jQuery，代码会更简洁：

• 直接给.b元素绑定点击事件
• 用.prev('.a')精准定位到前一个带有.a类的兄弟元素，然后调用.hide()方法隐藏它

代码示例：

$('.b').on('click', function() {
  // 找到前一个.a元素并隐藏
  $(this).prev('.a').hide();
});

小提示 #

• 注意如果.a和.b之间存在文本节点、注释节点（比如你代码里的//notice the container is closed），原生JS的previousSibling会拿到这些非元素节点，所以一定要用previousElementSibling；而jQuery的.prev()默认会过滤掉这类节点，使用起来更省心
• 如果需要支持非常老旧的浏览器（比如IE8及以下），可能需要做兼容性处理，但现在主流浏览器都已经支持previousElementSibling了

内容的提问来源于stack exchange，提问作者Benjoe