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

Вы были близки. Используйте .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 как класс).

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>