Question

我有一行包含几个后代的输入。我想要做的是在单击行中的按钮时捕获子输入的值。然后，我可以使用更深入的值，但不确定如何正确提取值。对我有什么建议？

    <div class="row">   
      <div class="form-horizontal">
        <div class="col-md-6">
          <div class="form-group">
            <div class="col-sm-10"><input type="text" value='0' class="form-control" >
</div></div>
     <div class="col-sm-offset-2 col-sm-10">
                              <button type="button" class="btn btn-default updateButton">Update</button>
                            </div></div></div></div>

$('.updateButton').on('click', function () {
        var inputs = [];
        $(this).parent('.row').find('input').each(function (i) {
            inputs.push($(this).val());
        });

Answer 1

如果我理解正确，你就非常接近。你可能想要这样的东西：

$('.updateButton').on('click', function() {
    var inputs = [];
    $(this).closest('.row').find('input').each(function() {
        inputs.push($(this).val());
    });
});

Answer 2

检查此工作示例：

$(document).on('click', '.updateButton', function() {
  var inputs = [];
  // Go up the DOM tree and find the closest .row, then find any input element inside this .row and iterate them
  $(this).closest('.row').find('input').each(function() {
    // For each input, push it's value to inputs array 
    inputs.push($(this).val());
  });
  alert(inputs);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row">   
  <div class="form-horizontal">
    <div class="col-md-6">
      
      <div class="form-group">
        <div class="col-sm-10">
          <input type="text" value='0' class="form-control" >
        </div>
      </div>
      
      <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-default updateButton">Update</button>
      </div>
      
    </div>
    
  </div>
</div>

Answer 3

你很亲密。请使用.parents，因为.parent只能在DOM树中向上移动一级。

$('.updateButton').on('click', function () {
  var inputs = [];
  $(this).parents('.row').find('input').each(function (i, el) {
    inputs.push($(el).val());
  });
});

但是，closest()更好，速度更快。只是想指出你的代码有什么问题。另请注意parents()将获得与选择器匹配的所有祖先，因此您可能会获得多个DOM元素（如果最终有多个div作为类row）。

jquery .find（'input'）。每个

3 个答案: