Jquery получить массив значений входных элементов внутри общего родителя

Question

У меня есть приложение jquery, где я templating блок html, который содержит 3 текстовых поля. Мне нужно получить значения текстовых полей в определенном блоке. идентификаторы реплицируются во всех блоках.

Пример кода

<div> 
    <div class="htmlBlock"> 
    <ul> 
     <li> 
     <input class="myInput1" type="text"> 
     <input class="myInput2" type="text"> 
     <input class="myInput3" type="text"> 
     </li> 
     <li> 
     <input class="myInput1" type="text"> 
     <input class="myInput2" type="text"> 
     <input class="myInput3" type="text"> 
     </li> 
     <li> 
     <input class="myInput1" type="text"> 
     <input class="myInput2" type="text"> 
     <input class="myInput3" type="text"> 
     </li> 
    </ul> 
    <button class="clickMe">Click to get values of this block</button> 
    </div> 
    <div class="htmlBlock"> 
    <ul> 
     <li> 
     <input class="myInput1" type="text"> 
     <input class="myInput2" type="text"> 
     <input class="myInput3" type="text"> 
     </li> 
    </ul> 
    <button class="clickMe">Click to get values of this block</button> 
</div> 
</div> 

При нажатии на кнопку .clickMe Я хочу вызвать $('.myInput').val() и получить значение только в пределах блока, что кнопка расположена.

Answer 1

Вы можете сделать следующее:

$('button.clickMe').on('click', function() { 
    var block = $(this).closest('.htmlBlock'); 
    var inputs = block.find('input[type="text"]'); 
    // .myInput1 values as an array. 
    var myInput1Vals = block.find('.myInput1').map(function() { 
     return this.value; 
    }); 
    // Do what you want to do 
}); 

Я не использовал $('.myInput').val(), так как у вас есть разные классы на каждом входе. Но вы можете пройти через них, делать с ними все, что хотите, и все они будут локализованы внутри этого блока.

jsfiddle

Этот fiddle преобразует его в массив, который не является объектом, используя JQuery .toArray() после .map.

Answer 2

$('button.clickMe').on('click', function() { 
    var values = $(this).closest('.htmlBlock').find('input[type="text"]').map(function(){ 
        return this.value; 
       }).get(); 
});