Получение ближайшего входного значения из элемента click с jQuery

У меня есть следующая разметка:

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

У меня есть событие click, связанное с классом 'add' с помощью jQuery. Когда я нажимаю на это, я хотел бы получить значение name= "количество", но есть несколько мест, на которые нажимается "add", и несколько полей количества.

Я пытаюсь получить "ближайшее" значение ввода. Я пробовал использовать "ближайший" и "findall", но не повезло.

Любая идея, как я могу получить это, используя jQuery? Спасибо!

Ответ 1

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

Стратегия:

Используйте closest, чтобы найти ближайшего предка, соответствующего данному селектору (в данном случае a div с классом option)
Затем используйте find, чтобы найти input с данным name, используя равен селектору.
Наконец, используйте val, чтобы получить значение input.

Ответ 2

Вам нужно использовать closest, чтобы найти правильный вложенный элемент, а затем работать оттуда.

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

Ответ 3

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

Это должно сделать трюк

Ответ 4

Я думаю, что ближайший работает только с теми же элементами уровня. поэтому..

Почему бы не поместить id в поле ввода и выбрать $('#input-id')?

Или перейдите к параметрам класса и найдите вход там: $(this).parents('.options:first').find('input');