讀取輸入值分別

Question

我的HTML看起來像這樣：

<div id="Section1" class="divFiles"> 

<input type="text" name="file"> 

<input type="text" name="file"> 

<input type="text" name="file"> 

<input type="text" name="file"> 

</div> 

    <div id="Section2" class="divFiles">  

<input type="text" name="file"> 

<input type="text" name="file"> 

<input type="text" name="file"> 

<input type="text" name="file"> 

</div> 

我想生成的對象列表具有兩個屬性：key，和listTitles，關鍵是div的只是id和listTitles是input字段中每個值的列表。我沒有任何問題分別檢索每個div的id，但我不確定哪個是正確的方式來讀取div中包含的所有值inputs。 我的目標是有這樣的結果：

{key: Section1, listTitles: inputValue1Div1, inputValue2Div1, inputValue2Div1, inputValue2Div1 }, 
{key: Section2, listTitles: inputValue1Div2, inputValue2Div2, inputValue2Div2, inputValue2Div2 } 

我使用這個代碼，只檢索divs id，問題是，以填補listTitles屬性與當前div的輸入值的字段。我需要改變什麼？

var divElements = $(".divFiles"); 
    var tests = []; 
    $.each(divElements, function() {   
    tests.push({ 'key': $(this).attr('id'), 'listTitles':$.each(JSON.parse($(this).children("input[name=file]").val()))}); 
    }) 

Answer 1

你幾乎明白了。改爲使用.map().get()。

var divElements = $(".divFiles"); 
 
var tests = []; 
 

 
$.each(divElements, function() { 
 
    tests.push({ 
 
    'key': $(this).attr('id'), 
 
    'listTitles': $(this).children("input[name=file]").map(function(i, elem) { 
 
     return this.value; 
 
    }).get() 
 
    }); 
 
}) 
 

 
console.log(tests);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="Section1" class="divFiles"> 
 
    <input type="text" name="file" value="a"> 
 
    <input type="text" name="file" value="b"> 
 
    <input type="text" name="file" value="c"> 
 
    <input type="text" name="file" value="d"> 
 
</div> 
 

 
<div id="Section2" class="divFiles"> 
 
    <input type="text" name="file" value="e"> 
 
    <input type="text" name="file" value="f"> 
 
    <input type="text" name="file" value="g"> 
 
    <input type="text" name="file" value="h"> 
 
</div>