JQuery如何避免next（）方法链接

Question

我的问题的完整工作JSFiddle here。

我有一个具有多个子窗体形式：

<div class="container-fluid"> 
    <form> 
    <ul style="list-style-type: none"> 
    <li class="panel panel-body panel-default"> 
     <div class="form-group"> 
     <label clas="control-label" for="1_sample">Sample</label> 
     <input type="number" id="1_sample" name="1_sample" class="form-control"> 
     </div> 
     <div class="progress"> 
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> 
       <span class="sr-only">100% Complete</span> 
      </div> 
     </div> 
     <div class="form-group"> 
     <label clas="control-label" for="1_result">Result</label> 
     <input type="number" id="1_result" name="1_result" class="form-control"> 
     </div> 
     <div class="form-group"> 
     <label clas="control-label" for="1_number">Number</label> 
     <input type="number" id="1_number" name="1_number" class="form-control"> 
     </div> 
    </li> 
     <li class="panel panel-body panel-default"> 
     <div class="form-group"> 
     <label clas="control-label" for="2_sample">Sample</label> 
     <input type="number" id="2_sample" name="2_sample" class="form-control"> 
     </div> 
     <div class="progress"> 
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> 
       <span class="sr-only">100% Complete</span> 
      </div> 
     </div> 
     <div class="form-group"> 
     <label clas="control-label" for="2_result">Result</label> 
     <input type="number" id="2_result" name="2_result" class="form-control"> 
     </div> 
     <div class="form-group"> 
     <label clas="control-label" for="2_number">Number</label> 
     <input type="number" id="2_number" name="2_number" class="form-control"> 
     </div> 
    </li> 
    </ul> 
    </form> 
</div> 

的编码行为是当sample输入的变化，在同一li变化result和number输入在一起。

我的JQuery目前的样子：

$(document).ready(function() { 
    var form = $('form'); 
    form.on('change', 'input[id$="sample"]', function (e) { 
      var sample_field = e.target; 
      var result_field = $(sample_field).closest('.form-group').next().next().find("input[id$='result']"); 
      var number_field = $(sample_field).closest('.form-group').next().next().next().find("input[id$='number']"); 

      var sample = $(sample_field).val(); 

      $(result_field).val(sample); 
      $(number_field).val(sample); 
    }); 
}); 

什么我不知道是是否有办法避免next()链接以获得正确的形式组？在真实的代码中，链条非常长，并且对元素的添加或删除也不是非常健壮。

find()本身似乎并没有探索输入的.form-group元素 - 是否有更好的方法来编写此功能？

更新：

的jsfiddle与代码更新，以反映接受的答案here。

Answer 1

您可以选择使用$（ '形式'）的元素。find（）方法像以下，以避免下一个（）链接

$(document).ready(function() { 
 
    var form = $('form'); 
 
    form.on('change', 'input[id$="sample"]', function (e) { 
 
    var sample_field = e.target; 
 
    var result_field = $('form').find("div.form-group > input[id$='result']"); 
 
    var number_field = $('form').find("div.form-group > input[id$='number']"); 
 
    var sample = $(sample_field).val(); 
 

 
    $(result_field).val(sample); 
 
    $(number_field).val(sample); 
 
    }); 
 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <form> 
 
    <ul style="list-style-type: none"> 
 
     <li class="panel panel-body panel-default"> 
 
     <div class="form-group"> 
 
      <label clas="control-label" for="1_sample">Sample</label> 
 
      <input type="number" id="1_sample" name="1_sample" class="form-control"> 
 
     </div> 
 
     <div class="progress"> 
 
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> 
 
      <span class="sr-only">100% Complete</span> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label clas="control-label" for="1_result">Result</label> 
 
      <input type="number" id="1_result" name="1_result" class="form-control"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label clas="control-label" for="1_number">Number</label> 
 
      <input type="number" id="1_number" name="1_number" class="form-control"> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </form> 
 
</div>

这里是jsfiddle：https://jsfiddle.net/v5mhu02n/3/

Answer 2

如果要保持你的表单输入相同的结构，这意味着IDS的命名结构遵循特定的模式：

1_sample, 1_result, 1_number 
2_sample, 2_result, 2_number 
3_sample, 3_result, 3_number 
... 

然后还有一个更优雅的解决方案，您可以在目标的ID直接输入字段。请看下面的更新您的代码：

$(document).ready(function() { 
    var form = $('form'); 
    form.on('change', 'input[id$="sample"]', function (e) { 
      //Get number prepended to id 
      var formGroupIdx = $(this).attr('id').split("_")[0]; 

      //Get specific inputs using a concatenation of the prepended 
      //index and the default description of the input 
      var result_field = $('#'+formGroupIdx+'_'+'result'); 
      var number_field = $('#'+formGroupIdx+'_'+'number'); 

      var value = $(this).val(); 
      result_field.val(value); 
      number_field.val(value); 
    }); 
}); 

为“样本”，在结尾给定的输入，那就先获取该假装号（1,2,3 ......）。然后它将直接使用该索引值获取相应的结果和数字输入。最后它设置的值等于当前的采样输入。

更新jsfiddle