Как получить значение поля ввода для брата?

Question

У меня есть форма с двумя полями ввода в одной строке. Вот пример:

$(".qtr-date").on("change", function() {
  let $curr_field = $(this);
  let $next_field = $curr_field.parent().parent().next().find('input.qtr-date');
  let start_dt = new Date($curr_field.val());
  let end_dt = new Date($next_field.val());

  console.log(start_dt);
  console.log(end_dt);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="form-group row ml-0">
  <label for="quarter-1" class="col-2 col-form-label font-weight-bold">1st Quarter</label>
  <div class="col-5">
    <div class="input-group">
      <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-calendar"></i></span></span>
      <input class="form-control qtr-date" type="text" name="q1_start" id="q1_start" value="01/31/2020" data-initial="01/31/2020" data-label="1st Quarter Start" required="">
    </div>
  </div>
  <div class="col-5">
    <div class="input-group">
      <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-calendar"></i></span></span>
      <input class="form-control qtr-date" type="text" name="q1_end" id="q1_end" value="12/31/2020" data-initial="12/31/2020" data-label="1st Quarter End" required="">
    </div>
  </div>
</div>

В приведенном выше примере, если я нажму на дату начала 1-го квартала, консоль выведет оба значения Дата начала / окончания. Я щелкнул дату окончания и изменил значение. Консоль напечатала значение даты начала, но значение даты окончания было нулевым. Я вижу проблему, поскольку мой код работает только для сценария, когда пользователь нажимает дату начала, но я бы хотел, чтобы это работало и в обратном направлении. если пользователь щелкает эфирную дату начала или окончания, оба значения показывают печать в консоли. Если кто-нибудь знает простой способ исправить это, дайте мне знать.

Answer 1

Чтобы устранить проблему, используйте closest(), чтобы получить общий родительский элемент целевых входов, .form-group в следующем примере, затем используйте find(), чтобы получить значения из них обоих.

$(".qtr-date").on("change", function() {
  let $container = $(this).closest('.form-group');
  let start_dt = new Date($container.find('.qtr-date:first').val());
  let end_dt = new Date($container.find('.qtr-date:last').val());

  console.log(start_dt);
  console.log(end_dt);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="form-group row ml-0">
  <label for="quarter-1" class="col-2 col-form-label font-weight-bold">1st Quarter</label>
  <div class="col-5">
    <div class="input-group">
      <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-calendar"></i></span></span>
      <input class="form-control qtr-date" type="text" name="q1_start" id="q1_start" value="01/31/2020" data-initial="01/31/2020" data-label="1st Quarter Start" required="">
    </div>
  </div>
  <div class="col-5">
    <div class="input-group">
      <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-calendar"></i></span></span>
      <input class="form-control qtr-date" type="text" name="q1_end" id="q1_end" value="12/31/2020" data-initial="12/31/2020" data-label="1st Quarter End" required="">
    </div>
  </div>
</div>