构造表单和输入以促进使用fieldset-only ID进行迭代
假设我有3个fieldsets,每个fieldset有2个输入:NAME和AGE。 稍后,我想用JQUERY遍历表单并读取每个字段集的所有输入。构造表单和输入以促进使用fieldset-only ID进行迭代
我应该如何构建字段集和输入以最大限度地促进迭代?现在,我为每个输入分配唯一的ID - 但是如果可能的话,最好将唯一标识进一步推到树上,像fieldset标记。
我将如何使用Jquery访问fieldset集合中的每个元素?
你可以做到这样的, 分配“名称”为每名文本框和“年龄”类适于各种文本框类。然后通过类似tihs每个迭代feildset,
var people=[];
$('feildset').each(function(index,feildset){
people.push({Name:$('.name',feildset).val(), Age:$('.age',feildset).val()})
});
<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());
});
试试这个:
$('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);
})
})
如果他们比儿童更深入DOM,会怎么样?另外,如果你有这样的通用非'''''选择器,'.children('input')'会更有效率。 –
@JaredFarrish谢谢,好点。 – undefined
我用了这个想法。但不是分配一个类,我使用了输入的名字,如下所示:$('[name =“age”]',fieldset).val()。 – scifirocket