如何将属于父 div 的同级的同一类的输入元素分组？

debugcn 发表于 Dev

Jc 巴兰塔克博

我的 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>

我使用 class 的原因是因为我在循环浏览存储在数据库中的问题时有不同数量的问题。问题是有些问题有多个答案，有些问题是单行答案。

我希望能够将这些元素的值分组为各自问题的答案。我设法添加了一个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;
    }
}

注意：问题的数量不同

蒂莫西·格鲁特

让我们在适当的data属性中维护元素中的字段值。

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

然后，您可以在 for 循环中执行此操作，将具有可以追溯到您的问题 ID 的名称的属性添加到对象（此处为 named 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。