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输入发生变化时，result和number输入在同一个li中> 一起改变。

我的 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() 链接以获得正确的表单组？在实际代码中，next() 链非常长，并且对于添加或删除元素也不是很稳健。

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

更新:

JSFiddle 更新了代码以反射(reflect)已接受的答案 here .

Answer 1

如果您保持表单输入的结构相同，则意味着 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...)。然后使用该索引值直接得到相应的结果和数字输入。最后，它将值设置为等于当前样本输入。

已更新 jsfiddle