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