如何分组同父类div的同类的输入元素？

Question

我的cshtml文件中呈现的html。

<div> 
    <div> 
     <input class="Question" datafield="1" type="text" /> //question 1 
    </div> 
    <div> 
     <input class="Question" datafield="2" type="checkbox" />//question 2 
     <input class="Question" datafield="2" type="text" />  //question 2 
    </div> 
    <div> 
     <input class="Question" datafield="3" type="radio" /> //question 3 
     <input class="Question" datafield="3" type="radio" /> //question 3 
     <input class="Question" datafield="3" type="radio" /> //question 3 
    </div> 
    <div> 
     <select datafield="4" class="Question">     //question 4 
     <option val='sample1'>text1</option> 
     <option val='sample2'>text2</option> 
     </select> 
    </div> 
</div> 

我使用类的原因是因为有不同数量的，因为我通过存储在数据库中的问题循环的问题。事情是有些问题有多个答案，有些问题是单行答案。

我希望能够将这些元素的值作为各自问题的答案进行分组。我已经设法添加一个datafield属性来区分一个组和另一个组。

目前我有这个在我的javascript：

var question = []; 
var questions = $('.Question'); 
$.each(questions, function (i, element) { 
}); 

的问题是，我不能在$.each到组的元素融入到阵列想到的，如果条件。

希望的输出：

var x = [datafield1:{input elements with datafield=1}, datafield2:{input elements with datafield=2}, datafield3:{input elements with datafield=3}, datafield4:{input elements with datafield=4}, .. ] 

希望的阵列，我可以通过进行验证循环。

for(...) 
{ 
    for() 
    { 
     if(x[.][.]=='' || undefined) 
     return false; 
    } 
} 

注： 问题的数量而变化

Answer 1

让我们保持在一个适当的data属性中的元素字段值。

<input class="Question" data-field="1" type="text" /> //question 1 

然后，您可以做到这一点你的for循环，增加性与可追溯到您的问题ID为一个对象（这里命名groupedData）名称：

var groupedData = {}; 
 
    
 
var questions = $('.Question'); 
 

 
$.each(questions, function (i, elem) { 
 
    var questionId = $(elem).data("field"); 
 
    if(!groupedData.hasOwnProperty(questionId)) 
 
     groupedData[questionId] = []; 
 

 
    groupedData[questionId].push($(elem).val()); //or whatever information you want to keep per-question. 
 

 
}); 
 

 
console.log(groupedData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div> 
 
     <input class="Question" data-field="1" type="text" /> 
 
    </div> 
 
    <div> 
 
     <input class="Question" data-field="2" type="checkbox" /> 
 
     <input class="Question" data-field="2" type="text" />  
 
    </div> 
 
    <div> 
 
     <input class="Question" data-field="3" type="radio" /> 
 
     <input class="Question" data-field="3" type="radio" /> 
 
     <input class="Question" data-field="3" type="radio" /> 
 
    </div> 
 
    <div> 
 
     <select data-field="4" class="Question"> 
 
      <option val='sample1'>text1</option> 
 
      <option val='sample2'>text2</option> 
 
     </select> 
 
    </div> 
 
</div>

Answer 2

使用Array.prototype.reduce得到的问题清单及其回答 - 见下面的演示：

var questions = Array.prototype.reduce.call($('.Question'), function(p,c) { 
 
    let key = 'datafield ' + $(c).attr('datafield'); 
 
    p[key] = p[key] || []; 
 
    p[key].push($(c).val()); 
 
    return p; 
 
},Object.create(null)); 
 

 
console.log(questions);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div> 
 
    <input class="Question" datafield="1" type="text" /> 
 
    </div> 
 
    <div> 
 
    <input class="Question" datafield="2" type="checkbox"/> 
 
    <input class="Question" datafield="2" type="text" /> 
 
    </div> 
 
    <div> 
 
    <input class="Question" datafield="3" type="radio" /> 
 
    <input class="Question" datafield="3" type="radio" /> 
 
    <input class="Question" datafield="3" type="radio" /> 
 
    </div> 
 
    <div> 
 
    <select datafield="4" class="Question">    
 
     <option val='sample1'>text1</option> 
 
     <option val='sample2'>text2</option> 
 
     </select> 
 
    </div> 
 
</div>

Answer 3

设置每个data-field财产为对象的关键：

var output = {}; 
 

 
$('.Question[data-field]').each(function() { 
 
    var prop = $(this).data('field'); 
 
    if (typeof output[prop] === "undefined") { 
 
     output[prop] = []; 
 
    } 
 
    output[prop].push($(this).val()); 
 
}); 
 

 
console.log(output);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div> 
 
    <input class="Question" data-field="1" type="text" /> 
 
    </div> 
 
    <div> 
 
    <input class="Question" data-field="2" type="checkbox" /> 
 
    <input class="Question" data-field="2" type="text" /> 
 
    </div> 
 
    <div> 
 
    <input class="Question" data-field="3" type="radio" /> 
 
    <input class="Question" data-field="3" type="radio" /> 
 
    <input class="Question" data-field="3" type="radio" /> 
 
    </div> 
 
    <div> 
 
    <select data-field="4" class="Question"> 
 
      <option val='sample1'>text1</option> 
 
      <option val='sample2'>text2</option> 
 
     </select> 
 
    </div> 
 
</div>