使用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将点击事件绑定到“add”类。当我点击它时，我想获取name =“quantity”的值，但有几个地方都会点击“add”，而且有几个数量字段。

我尝试使用'closest'和'findall'来获取最接近的输入值，但没有成功。

有什么想法可以使用jQuery来实现吗？谢谢！

- David

---

我从未听说过jQuery方法findall。我建议您浏览遍历方法并查看它们。closest已经是一个不错的开始。请发布您目前拥有的代码。 - Felix Kling

Answer 1

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

这里的策略是：

• 使用 closest 查找与给定选择器（在本例中为具有类名为 option 的 div）最接近的祖先元素
• 然后使用 find 和 属性选择器 查找具有给定名称的 input 元素。
• 最后，使用val来检索 input 的值。

- Andrew Whitaker

Answer 2

你需要使用closest来找到正确的包含元素，然后从那里开始进行操作。

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

- Matti Virkkunen

Answer 3

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

这应该能解决问题

- Dominic Green

---

好的，我错了。不过我仍然建议使用“closest”。无论如何，我已经编辑了我的回答以确保正确性。 - Dominic Green

Answer 4

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

为什么不给输入字段设置id并通过 $('#input-id') 进行选择？

或向上遍历至选项类，并在其中查找输入： $(this).parents('.options:first').find('input');

- Kristian

---

closest 找到与选择器匹配的最近祖先元素。 parents 找到所有匹配选择器的祖先元素。 - Felix Kling

刚刚修好了，添加了:first。所以closest函数可以向上搜索DOM？又更加智能了.. :) - Kristian