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

完全解决了我的问题

我有一个包含多个子表单的表单：

<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>

我想知道的是，是否有办法避免

next（）

链接以获得正确的表单组？在实际代码中，

next（）

链非常长，而且对于元素的添加或删除也不是非常健壮

find（）

本身似乎无法探索输入的

.form组

元素-是否有更好的方法来编码此功能

更新：

---

jsIDLE，代码更新以反映接受的答案。

如果您保持表单输入的结构相同，则表示ID的命名结构遵循特定模式：

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);
    });
});

对于以“sample”结尾的给定输入，它将首先获取假装的数字（1,2,3…）。然后，它将直接获得相应的结果，并使用该索引值对输入进行编号。最后，它将值设置为等于当前样本输入

---

更新了

您可以使用$（'form'）选择元素

$（文档）.ready（函数（）{
变量形式=$（'form'）；
表单.on（'change'，'input[id$=“sample”]'，函数（e）{
var样本_字段=e.目标；
var result_field=$（'form'）.find（“div.form-group>input[id$='result']）；
var number_field=$（'form'）。查找（“div.form-group>input[id$='number']”；
var sample=$（sample_字段）.val（）；
$（结果字段）.val（样本）；
$（数字字段）.val（样本）；
});
});



样品
100%完成
结果
数


谢谢-在我的特殊情况下，代码片段是
$（示例字段）。最近（'.form group'）.parent（）。查找（“div.form-group>input[id$='result']）。
$(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);
    });
});