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

Question

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.

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

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

Answer 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 )
• Then use find to find the input with the given name using the attribute equals selector .
• Finally, use val to retrieve the value of the input .

Answer 2

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

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

Answer 3

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

这应该可以解决问题

Answer 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') ?

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