jquery .find（ 'input'）。each

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

あなたは近くでした。 .parentはDOMツリーの1つのレベルを移動するだけなので、代わりに.parentsを使用します。

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

ただし、closest()は、より高速で高速です。ちょうどあなたのコードに何が間違っていたかを指摘したかっただけですまた、parents()はセレクタに一致するすべての祖先を取得するので、結果として複数のDOM要素を取得する可能性があります（クラスとしてrowで複数のdivがある場合）。

Answer 3

チェックこの作業例：

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