jQuery中如何获取独立div的最近类元素 点击按钮获取对应input值

问题原因 #

closest() 方法的查找逻辑是沿DOM树向上遍历当前元素的所有祖先节点，你要获取的<input>元素不是点击按钮的祖先节点，因此无法匹配到元素，返回空导致取值失败。

解决方案 #

你可以先通过点击按钮定位到二者共同的祖先容器.main-div，再在该容器内查找目标input即可，该写法同时兼容同页面存在多组相同结构的场景，只会匹配当前点击按钮所属区块内的元素，符合「最近」的取值需求。

修改后的完整代码如下：

JavaScript 代码 #

$(document).on("click", ".button", function() {
  // 定位当前按钮所属的主容器
  const $currentMain = $(this).closest(".main-div");
  // 获取 name="something" 的input值
  const somethingVal = $currentMain.find('input[name="something"]').val();
  // 获取 class="a-input" 的input值
  const aInputVal = $currentMain.find('input.a-input').val();

  // 以下为原有逻辑
  const div = `<div class="second-div"><input name="something"/></div>
         <div class="third-div"></div>`
  $(".main-div").append(div);
});

HTML代码（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-div">
  <div class="second-div">
    <input name="something" class="input" />
  </div>
  <div class="third-div">
    <input name="another input" class="a-input" />
  </div>
  <div class="fourth-div">
    <button type="button" class="button">点击我</button>
  </div>
</div>

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