Как получить идентификатор брата с помощью класса в JQuery

Question

Я немного запутался, чтобы получить доступ к брату элемента по его классу, используя jQuery.

Возвращает:

Имя ветви: не определено

Город филиала: [объект Объект]

Вот мой код:

$(document).ready(function() {
  $(".ifsc_code").on("keyup", function() {
    console.log("Branch Name:" + $(this).parent().parent().parent().find("input.branch_name").attr('id'));
    console.log("Branch City:" + $(this).siblings(".branch_city"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
  <div class="form-group form-float">
    <label class="form-label">IFSC Code*</label>
    <div class="form-line">
      <input id="ifsc_code" type="text" name="ifsc_code" minlength="11" maxlength="11" class="form-control ifsc_code" required>
    </div>
  </div>
</div>
<div class="col-sm-4">
  <div class="form-group form-float">
    <label class="form-label">Branch Name*</label>
    <div class="form-line">
      <input id="branch_name" type="text" name="branch_name" class="form-control branch_name" readonly>
    </div>
  </div>
</div>

Я три раза использовал один и тот же код в качестве динамического кода с одинаковыми классами, так что я хочу выполнять это только с помощью класса.

Спасибо

Answer 1

Вы пропустили parent() в цепочке.
Я бы порекомендовал использовать closest(".col-sm-4") или дать этому div какой-то значимый класс и использовать его вместо этого.
Кроме того, branch-city нигде не будетнашел в вашем HTML, как вы думаете, чтобы найти его?
Я прокомментировал это, так как я не могу угадать, где это должно быть или что это такое.

$(document).ready(function() {
  $(".ifsc_code").on("keyup", function() {
    console.log("Branch Name:" + $(this).parent().parent().parent().parent().find("input.branch_name").attr('id'));
    // There is no element with class 'branch_city'
    // console.log("Branch City:" + $(this).siblings(".branch_city"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
  <div class="form-group form-float">
    <label class="form-label">IFSC Code*</label>
    <div class="form-line">
      <input id="ifsc_code" type="text" name="ifsc_code" minlength="11" maxlength="11" class="form-control ifsc_code" required>
    </div>
  </div>
</div>
<div class="col-sm-4">
  <div class="form-group form-float">
    <label class="form-label">Branch Name*</label>
    <div class="form-line">
      <input id="branch_name" type="text" name="branch_name" class="form-control branch_name" readonly>
    </div>
  </div>
</div>

На самом деле, если вы хотите, чтобы элементы взаимодействовали через иерархические отношения (а не просматривали весь DOM), я бы обернул оба div в контейнер div с некоторым классом, скажем container, а затем я бы сделал:

console.log("Branch Name:" + $(this).closest(".container").find("input.branch_name").attr('id'));

Answer 2

Вы пытаетесь выбрать .form-group, используя $(this).parent().parent().parent(), у которого нет .branch_name потомка.Используйте это вместо

$(this).closest(".col-sm-4").next().find("input.branch_name")

$(".ifsc_code").on("keyup", function(){
    console.log("Branch Name:"+$(this).closest(".col-sm-4").next().find("input.branch_name").attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
  <div class="form-group form-float">
  <label class="form-label">IFSC Code*</label>
    <div class="form-line">
      <input id="ifsc_code" type="text" name="ifsc_code"  minlength="11" maxlength="11" class="form-control ifsc_code" required>
    </div>
  </div>
</div>
<div class="col-sm-4">
  <div class="form-group form-float">
  <label class="form-label">Branch Name*</label>
    <div class="form-line">
     <input id="branch_name" type="text" name="branch_name" class="form-control branch_name" readonly>
    </div>
  </div>