jQuery/JS如何获取表格行内当前select相邻的目标select元素

$(this).closest('.city-elem')获取不到元素的核心原因是：jQuery的closest()方法只会向上遍历当前元素的DOM祖先链，查找符合选择器的祖先节点。你要定位的.city-elem和触发change事件的.state-elem是分属不同<td>的平级节点，不在state元素的祖先链上，因此会返回长度为0的空jQuery对象。

要精准定位同一行的city下拉框，优先使用「先定位共同父级容器，再在容器范围内查找目标元素」的逻辑，该写法不依赖列的固定顺序，鲁棒性更强：

• 第一步：从当前触发事件的state下拉框出发，向上查找它所属的<tr>表格行
• 第二步：在找到的当前行范围内，查找.city-elem元素，只会匹配到同一行的城市下拉框，不会干扰其他行的元素

对应实现代码：

function shop_address_update(elem) {
  // 定位当前元素所在的表格行
  const $currentRow = $(elem).closest('tr');
  // 获取同一行的城市下拉框
  const $citySelect = $currentRow.find('.city-elem');

  // 后续填充选项逻辑参考
  $citySelect.empty(); // 清空原有选项
  // 拿到对应省份/州下的城市列表后，循环追加选项即可
  // cityList.forEach(city => {
  //   $citySelect.append(`<option value="${city.value}">${city.label}</option>`)
  // })
}

如果能完全确定表格列顺序不会调整，也可以用相邻节点查找的简写方式：

const $citySelect = $(elem).parent('td').next('td').find('.city-elem');

该写法依赖state列的下一个td固定为city列，后续如果调整表格列顺序会直接失效，不推荐优先使用。

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