构造表单和输入以促进使用fieldset-only ID进行迭代

Question

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

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

我将如何使用Jquery访问fieldset集合中的每个元素？

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); 
    }) 
})