jquery .find ('input'). 각각

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 트리 하나의 레벨을 이동하기 때문에 .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>