Как получить идентификатор брата с помощью класса в 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>