jQuery siblings()方法无法作用于div内元素？点击按钮弹出undefined

• 现有取值逻辑无法匹配到目标输入框：代码中使用$(this).siblings('.name')、$(this).siblings('.adId')查找元素时，定位范围是和当前点击按钮同属一个直接父级的平级节点。但你的HTML结构中，.updateAdvertiser按钮的直接父元素是单独的.inputbox容器，这个容器内部只有按钮本身，不存在带.name、.adId类的输入框；这两类输入框是和按钮所在.inputbox平级的独立div，根本不是按钮的直接兄弟节点，因此取值时返回undefined。

通过向上遍历DOM树锁定当前按钮所属的共同父容器，再在容器内部查找目标输入框，即可准确取值：

$('.updateAdvertiser').on('click', function() {
  // 从当前点击按钮出发，向上定位到最近的 .box 父容器，锁定当前按钮对应的整组输入
  const currentFormGroup = $(this).closest('.box');
  // 在当前组内查找对应输入框取值
  const name = currentFormGroup.find('.name').val();
  const adId = currentFormGroup.find('.adId').val();
  alert(adId);
});

方案说明 #

• 相比逐层向上调用parent()方法遍历DOM，closest('.box')会从当前按钮本身开始向上匹配，直接锁定最近的指定祖先容器，不受后续.inputbox层级调整的影响。
• 先锁定当前所属组、再查找内部元素的写法，可以完全避免多组表单场景下取错其他组输入值的问题。

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