如何在JavaScript中通过子元素找到req容器并为其添加类？

要实现通过.req-address子元素找到对应的.req容器并添加类，推荐使用closest() API——它能直接向上查找最近的匹配指定选择器的祖先元素，比依赖固定层级的parentNode更灵活可靠。

修改后的完整代码 #

JavaScript部分

const search = document.querySelector('.search-form');
const addresses = document.querySelectorAll('.req-address');

search.addEventListener('keyup', function(e) {
  const searchValue = search.value.trim();
  addresses.forEach(function(address) {
    // 获取对应的req容器
    const reqContainer = address.closest('.req');
    // 先移除之前可能添加的类，避免残留
    reqContainer.classList.remove('search-active');
    
    // 匹配内容时给容器添加类
    if (address.textContent.trim() === searchValue) {
      reqContainer.classList.add('search-active');
    }
  });
});

HTML部分

<div class="reqs-container">
  <div class="req">
    <div class="req-time">
      <div class="req-time_from">13:00</div>
      <span></span>
      <div class="req-time_to">15:00</div>
    </div>
    <div class="req-restaurant">Argentina Grill</div>
    <div class="req-address">Оболонь</div>
    <div class="req-name">Аліна</div>
    <a href="#" class="req-instagram">Instagram</a>
    <a href="#" class="req-confirm">Приєднатися</a>
  </div>
  <div class="req">
    <div class="req-time">
      <div class="req-time_from">13:00</div>
      <span></span>
      <div class="req-time_to">15:00</div>
    </div>
    <div class="req-restaurant">Argentina Grill</div>
    <div class="req-address">Хрещатик</div>
    <div class="req-name">Аліна</div>
    <a href="#" class="req-instagram">Instagram</a>
    <a href="#" class="req-confirm">Приєднатися</a>
  </div>
</div>

关键细节说明 #

1. closest('.req')的作用：从当前.req-address元素开始向上遍历DOM树，精准定位第一个带.req类的祖先容器，适配DOM结构变动的场景。
2. 类名的正确写法：classList.add()/remove()的参数不需要加.，原代码中address.classList.add('.search-active')是错误写法，直接写类名即可。
3. 处理输入残留状态：每次循环先移除search-active类，再判断是否匹配添加，确保输入内容变化时，之前匹配的容器能恢复原状，避免多个容器保留高亮类。

备选方案（不推荐，依赖固定结构） #

如果DOM层级永远不会改变，也可以用parentNode多层级查找，但这种方法容错性极低，结构变动就会失效：

// 仅当.req是.req-address的父元素的父元素时有效
const reqContainer = address.parentNode.parentNode;

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