JQuery:输入更改 - >找到父母 - >找到下一个输入 - >值返回undefined

时间:2017-12-28 17:42:53

标签: javascript jquery

我正在尝试获取下一行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>

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分: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>