JQuery - получить данные из различных типов элементов в несколько диве

Question

Рассмотрят следующий блок HTML:

<div class="wrapper"> 
    <select> 
     <option></option> 
     <option></option> 
     <option></option> 
    </select> 
    <input type="text"> 
</div> 
<div class="wrapper"> 
    <select> 
     <option></option> 
     <option></option> 
     <option></option> 
    </select> 
    <input type="text"> 
</div> 

дива с классом «оберткой» содержат несколько типов элементов (выбор, входы и т.д ...) Мне нужно что-то, что начинается с

$('.wrapper').each(function() { 
    // code that collects select, input data 
}); 

, который помещает данные в многомерном массиве (в [ «выберите опцию», «входных данных»]).

Как заметил Рори МакКросан в своем принятом ответе, я имел в виду, что мне нужен массив объектов, а не многомерный массив.

Answer 1

Вы можете использовать :input селектор:

var values = {}; 
$('.wrapper :input').each(function() { 
    values[$(this).prop('name')] = $(this).val(); 
}); 

: вход
Выбирает все входные, текстовое поле, выберите и кнопки элементов.

Более подробная информации о :input в jQuery docs

---

На основе ваших комментариев, вам нужны данные в виде массива объектов (заметит, что это не то же самое, как многомерный массив). Для этого вам понадобится две петли. Один для покрытия элементов .wrapper, а другой - для нахождения элементов :input. Попробуйте это:

var values = []; 
$('.wrapper').each(function() { 
    var wrapperValues = {}; 
    $(this).find(':input').each(function() { 
     wrapperValues[$(this).prop('name')] = $(this).val(); 
    }); 
    values.push(wrapperValues); 
}); 

Answer 2

Вы можете использовать что-то вроде этого.

var finalVal = []; 
$('.wrapper').each(function() { 
    $("input, select, textarea").each(function() { 
     finalVal.push($(this).val()); 
    }); 
}); 

Answer 3

var arr = []; 
 
$('.wrapper').children().each(function() { 
 
    // code that collects select, input data 
 
    arr.push($(this).val()); 
 
}); 
 

 
$('#value').html(arr)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <select> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
    </select> 
 
    <input type="text" value='12'> 
 
</div> 
 
<div class="wrapper"> 
 
    <select> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
    </select> 
 
    <input type="text" value='34'> 
 
</div> 
 
<div id='value'></div>

Попробуйте использовать этот способ .children()

Описание: Получить детей каждого элемента в наборе соответствующих элементов, при необходимости отфильтрованы с помощью селектора.

Answer 4

Самый простой способ имхо будет serailize все входы внутри обертки элементов:

var datas = $('.wrapper').find(':input').attr('name', function(){ 
    return this.nodeName.toLowerCase(); 
}).serializeArray(); 

Но предположим, что вам не имя, указанное для этих входов атрибутов, и что вы не» t хотите переопределить его.