如何查找同地址区块内最近的带address-department类的元素

错误原因分析 #

closest() 方法仅会向上遍历DOM树查找匹配的祖先元素，你要定位的.address-department输入框所在的.field节点，和当前触发事件的.address-zipcode的父.field是同级兄弟关系，不属于祖先节点范畴，因此原有写法无法匹配到目标元素。

正确实现方案 #

推荐先给每个地址区块的外层包裹div添加统一类名，降低后续结构调整带来的维护成本，稳定性更高：

1. 调整HTML结构（可选但推荐）

给两个地址区块的外层div新增统一类address-block：

<div class="address-block">
  <div class="field">
    <input type="text" class="address-zipcode">
  </div>
  <div class="field">
    <input type="text" class="address-department">
  </div>
  <div class="field">
    <input type="text" class="city">
  </div>
  <div class="field">
    <input type="text" class="country">
  </div>
</div>

<div class="address-block">
  <div class="field">
    <input type="text" class="address-zipcode">
  </div>
  <div class="field">
    <input type="text" class="address-department">
  </div>
  <div class="field">
    <input type="text" class="city">
  </div>
  <div class="field">
    <input type="text" class="country">
  </div>
</div>

2. JS逻辑编写

原生JS实现如下：

// 给所有邮编输入框绑定输入事件
document.querySelectorAll('.address-zipcode').forEach(zipInput => {
  zipInput.addEventListener('input', async function() {
    // 先定位当前邮编所属的地址区块
    const currentAddressBlock = this.closest('.address-block');
    // 在当前区块内查找对应部门输入框，不会匹配到其他区块的元素
    const departmentInput = currentAddressBlock.querySelector('.address-department');
    
    // 这里写你的AJAX请求逻辑
    // 示例：const deptName = await 请求接口返回的部门名称
    
    // 赋值给当前区块的部门输入框
    departmentInput.value = '接口返回的部门名称';
  })
})

如果不想修改HTML结构，也可以直接获取当前.field的父元素作为区块根节点，替换定位区块的代码即可：

const currentAddressBlock = this.closest('.field').parentElement;

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