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中的if条件将元素分组到数组中。

期望的输出：

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

使用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 2

让我们将元素中的字段值保持在正确的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 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>

如何将同一类的输入元素分组为父div的兄弟？

3 个答案: