如何用jQuery获取点击按钮所在classA容器下classB的HTML内容？

我看了你的问题，这大概率是DOM遍历的逻辑出了问题——你之前的代码可能没正确定位到目标容器，导致找不到classB元素才返回undefined。咱们一步步来修正：

核心问题分析 #

你之前的代码可能尝试用parentNode一层一层往上找，但嵌套结构一旦变复杂就容易出错；或者没限定查找范围，导致全局找classB，自然匹配不到正确的目标元素。

正确的解决方案 #

我们可以用closest()方法快速定位到按钮所在的最近的classA容器，然后在这个容器内部查找classB元素，这样就能精准获取目标内容了。

完整代码示例

<div class="classA">
  <div class="classB">我是第一个classB的内容</div>
  <div>
    <div>
      <button class="myBtn">点击我</button>
    </div>
  </div>
</div>

<div class="classA">
  <div class="classB">我是第二个classB的内容</div>
  <div>
    <button class="myBtn">点击我</button>
  </div>
</div>

// 给所有按钮绑定点击事件
document.querySelectorAll('.myBtn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 第一步：找到当前按钮所在的最近classA容器
    const container = this.closest('.classA');
    // 第二步：在容器内查找classB元素
    const targetElement = container.querySelector('.classB');
    // 第三步：获取并弹出内容
    if (targetElement) {
      alert(targetElement.innerHTML);
    } else {
      alert('未找到classB元素');
    }
  });
});

代码细节解释 #

• this.closest('.classA')：从当前点击的按钮出发，向上遍历DOM树，找到第一个带有classA类名的父元素，这一步直接锁定了按钮所属的目标容器，比一层一层调用parentNode靠谱得多。
• container.querySelector('.classB')：在刚才找到的classA容器内部查找classB元素，这样就不会被页面上其他无关的classB元素干扰。
• 增加了存在性判断，避免找不到元素时出现报错，让逻辑更健壮。

这样修改后，不管按钮嵌套多少层div，都能精准获取到它所在classA容器下classB的内容，不会再返回undefined啦。

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