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

I have the following markup:

我有以下标记:

<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>

I have a click event binded to the 'add' class using jQuery. When I click that, I'd like to get the value of name="quantity", but there are several places that 'add' is clicked and several quantity fields.

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

I'm trying to get the 'closest' input value. I've tried using 'closest' and 'findall' , but no luck.

我正试图获得'最接近'的输入值。我尝试过使用'最近'和'findall',但没有运气。

Any idea how I can get this using jQuery? Thank you!

知道如何使用jQuery获得这个吗?谢谢!

4 个解决方案

#1

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

The strategy here is:

这里的策略是:

Use closest to find the closest ancestor matching the given selector (in this case a div with class option)

使用最接近找到与给定选择器匹配的最近祖先(在本例中为带有类选项的div)

Then use find to find the input with the given name using the attribute equals selector.

然后使用find使用属性equals selector查找具有给定名称的输入。

Finally, use val to retrieve the value of the input.

最后,使用val来检索输入的值。

#2

You need to use closest to find the proper enclosing element and then work from there.

你需要使用最近的找到合适的封闭元素,然后从那里工作。

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

#3

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

This should do the trick

这应该可以解决问题

#4

I guess closest works only with same level elements. so..

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

Why not to put id to the input field and select by $('#input-id')?

为什么不把id放到输入字段并通过$('#input-id')选择?

Or traverse up to class options and find input in there: $(this).parents('.options:first').find('input');

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

#1

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