Использование .closest для элемента в другом родительском элементе

Question

Я пытаюсь получить значение поля ввода, которое ближе всего к моей кнопке. Я могу сделать это, используя for l oop всякий раз, когда нажимается кнопка, однако мне было интересно, можно ли это сделать, используя .closest? Ниже мой текущий код

$('.discount-code-btn').on('click', () => {
  $('.discount-code-field').each(function() {
    if ($(this).val().length != 0) {
      console.log($(this).val());
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12 col-12">
    <input type="text" class="form-control discount-code-field" placeholder="Discount Code" style="font-size:10px" />
  </div>

</div>
<div class="row mt-1">
  <div class="col-md-12 col-12">
    <button type="submit" class="form-control btn discount-code-btn" style="background-color:var(--light_blue);color:var(--white);font-size:10px"><b>Apply</b></button>
  </div>
</div>

Когда я пытался использовать ближайший, вот так:

$('.discount-code-btn').on('click',()=>{
   var temp = $(this).closest('input.discount-code-field').val();
   console.log(temp);
})

Выдает undefined. Есть идеи, как go об этом? Спасибо за внимание.

Answer 1

Ответ отрицательный. Вы не можете использовать closest так. closest перемещается только вверх по иерархии, и ввод не находится на верхнем уровне кнопки.

Описание: для каждого элемента в наборе получить первый элемент, который соответствует селектору, путем тестирования сам элемент и проходит через его предков в дереве DOM.

https://api.jquery.com/closest/#closest1

BTW, $(this) - это window из-за стрелочная функция. Я считаю, что вы имели в виду button, поэтому вам нужно использовать обычную функцию.

Answer 2

Кредиты для @ Karan

$('.discount-code-btn').on('click',function(){
    var temp = $(this).closest('.row').prev().find('.discount-code-field').val();
    console.log(temp);
})