jquery - 使用仅字段集 ID 构建表单和输入以促进迭代

Question

假设我有 3 个字段集，每个字段集有 2 个输入：NAME 和 AGE。稍后，我想用 JQUERY 遍历表单并读取每个字段集的所有输入。

我应该如何构建字段集和输入以最好地促进迭代？现在，我正在为每个输入分配唯一的 ID——但如果可能的话，最好将唯一标识符进一步推到树的上方，比如 fieldset 标记。

我如何能够使用 Jquery 访问字段集中的每个元素？

Answer 1

您可以这样做，为每个名称文本框分配“名称”类，为所有年龄文本框分配“年龄”类。然后像 tihs 一样遍历每个 feildset，

var people=[];
$('feildset').each(function(index,feildset){
    people.push({Name:$('.name',feildset).val(), Age:$('.age',feildset).val()})
});

Answer 2

<fieldset id="fieldset_1">
  <input type="text" class="name">
  <input type="text" class="age">
</fieldset>
<fieldset id="fieldset_2">
  <input type="text" class="name">
  <input type="text" class="age">
</fieldset>
<fieldset id="fieldset_3">
  <input type="text" class="name">
  <input type="text" class="age">
</fieldset>

然后你可以：

$("fieldset").each(function(){
  alert($(this).id + " has the name value: " + $(this).find("input.name").val());
  alert($(this).id + " has the age value: " + $(this).find("input.age").val());
});

Answer 3

试试这个：

$('fieldset').each(function() {
   var cls = $(this).attr('id');
   // this makes a ul element with a class based on the fieldset's id and appends it to the body
   $('</ul>').text($(this).attr('id') + ':').addClass(cls).appendTo('body');
   $(this).find('input').each(function() { // iterating over fieldset's inputs
       // this adds list elements to the ul 
       $('</li>').text($(this).attr('name') + ': ' + $(this).val()).appendTo("." + cls);
   })
})