JQuery：输入更改 - ＆gt;找到父母 - ＆gt;找到下一个输入 - ＆gt;值返回undefined

Question

我正在尝试获取下一行div子中可用的相同类或不同类的下一个最接近的输入，它表示未定义无法获取它。

[Fiddle]

$(".std_amt").change(function() {
      alert($(this).parent('.row').next(".row").children("input.std_amt").val());
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
      <div class="col-lg-3">
        <div class="form-group ">
    
          <input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
          <label class="help-inline"></label>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-3">
        <div class="form-group ">
    
          <input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
          <label class="help-inline"></label>
        </div>
      </div>
    </div>

Answer 1

.parent('.row')看直接父母，它不会爬树。您需要使用closest('.row')来引用该行。你应该使用find()而不是children()因为输入不是直接的孩子。

$(this).closest('.row').next(".row").find("input.std_amt")

Answer 2

尝试使用closest代替parent，如下所示

$(".std_amt").change(function() {
  alert($(this).closest('.row').next(".row").find("input.std_amt").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-3">
    <div class="form-group ">
      <input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
      <label class="help-inline"></label>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-lg-3">
    <div class="form-group ">
      <input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
      <label class="help-inline"></label>
    </div>
  </div>
</div>