javascript - Getting closest input value from clicked element with 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.