使用jQuery从单击的元素获取最接近的输入值

Question

我有以下标记：

<div class="options">
  <div class="quantity">
     <label>Qty:</label>
     <input type="text" name="quantity" value="1"/>
  </div>
  <div class="buttons">
    <a href="#" class="add">Add Item</a>
  </div>
</div>

我有一个使用 jQuery 绑定到“添加”类的点击事件。 当我点击它时，我想获得 name="quantity" 的值，但是有几个地方点击了“添加”和几个数量字段。

我正在尝试获得“最接近”的输入值。 我试过使用 'closest' 和 'findall' ，但没有运气。

知道如何使用 jQuery 获得它吗？ 谢谢！

Answer 1

$(".add").on("click", function () {
    var val = $(this).closest("div.options").find("input[name='quantity']").val();
});

这里的策略是：

• 使用closest的找到与给定选择器匹配的最近祖先（在这种情况下是一个带有 class option的div ）
• 然后使用find使用属性 equals selector查找具有给定name的input 。
• 最后，使用val检索input的值。

Answer 2

您需要使用closest来找到合适的封闭元素，然后从那里开始工作。

$(link).closest(".options").find("input[name=quantity]")

Answer 3

$(this).parent().parent().find("input[name=quantity]").val()

这应该可以解决问题

Answer 4

我猜最接近的作品仅适用于相同级别的元素。 所以..

为什么不将 id 放入输入字段并按$('#input-id') ？

或者遍历类选项并在那里找到输入： $(this).parents('.options:first').find('input');