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.