如何以克隆形式(javascript)重命名所有ID? [英] How to rename all id in a cloned form (javascript)?
问题描述
我有一个以这种方式克隆的表单(commonStuff)(还有一个在jquery mobile中设计的html页面,该表单多次出现,已被克隆):
I have a form (commonStuff) cloned this way (and an html page, designed in jquery mobile, where the form appears multiple times, cloned):
var commonClone = commonStuff.cloneNode(true);
和此功能
function renameNodes(node) {
var i;
if (node.length) {
for (i = 0; i < node.length; i += 1) {
renameNodes(node[i]);
}
} else {
// rename any form-related elements
if (typeof node.form !== 'undefined') {
node.id = currentPrefix + '_' + node.id;
node.name = currentPrefix + '_' + node.name;
// This assumes that form elements do not have child form elements!
} else if (node.children) {
renameNodes(node.children);
}
}
}
在ID和表单中任何元素的名称之前添加前缀"form1 _","form_2"(当前前缀),并应用于commonClone(并递归应用于其儿子).
which add a prefix 'form1_', 'form_2' (the currentPrefix) to id and names of any element in the form and is applied to commonClone (and so recursively to his sons).
renameNodes(commonClone);
在像文本输入这样的情况下,它可以完美工作
It work perfectly in case of text inputs like
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="foo" class="ui-input-text">Age:</label>
<input type="text" name="age" id="age" value="" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">
</div>
但是在单选按钮之类的失败
But it fails on radio buttons like
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Address:</legend>
<input type="radio" name="radio-address" id="radio-address_female" value="1" checked="checked" />
<label for="radio-address_female">Address 1</label>
<input type="radio" name="radio-address" id="radio-address_male" value="2" />
<label for="radio-address_male">Address 2</label>
</fieldset>
</div>
将重命名应用于"fieldcontain"和"controlgroup"之类的外部div.如果我删除了这两个divs,但是图形效果是不可接受的...
applying the renaming to the outer divs like 'fieldcontain' and 'controlgroup'. It works if i remove those two divs but the graphical effect is unacceptable...
就目前而言,我知道问题出在最后一个"else if"块中,因为它不在乎兄弟姐妹,但我真的不知道如何解决此问题.有什么主意吗?
As far as now, i got the problem is in the last 'else if' block for it doesn't care of siblings, but I don't really know how to fix this. Any idea?
此代码来自此答案如何创建具有通用div的选项卡式html表单
推荐答案
在使用jQuery mobile时,将可以使用jQuery. 我希望这段代码能为您指明正确的方向:
As you use jQuery mobile, jQuery will be available. I hope this code will point you in the right direction:
var i = 0;
$("form").each(function() {
$(this).find("input, select").each(function() {
$(this).attr("id", "form" + i + "_" + $(this).attr("id"));
$(this).attr("name", "form" + i + "_" + $(this).attr("name"));
});
$(this).find("label").each(function() {
$(this).attr("for", "form" + i + "_" + $(this).attr("for"));
});
i++;
});
编辑:
我了解您当前使用标签的方法会失败.考虑将输入元素包装在label
标记内.在这种情况下,您将不需要for
属性.这符合以下文档: http://api.jquerymobile.com/checkboxradio/
考虑一下:
I understand your current approach fails with labels. Consider to wrap your input elements inside the label
tag. In that case, you won't need the for
-attribute. This is in accordance with the docs: http://api.jquerymobile.com/checkboxradio/
Consider this:
HTML
<form>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Address:</legend>
<label><input type="radio" name="radio-address" id="radio-address_female" value="1" checked="checked" />Address 1</label>
<label><input type="radio" name="radio-address" id="radio-address_male" value="2" />Address 2</label>
</fieldset>
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label><input type="text" name="age" id="age" value="" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset">Age:</label>
</div>
</form>
jQuery
var i = 0, currentPrefix = "form";
$("form").each(function() {
$(this).find("input, select").each(function() {
$(this).attr("id", currentPrefix + i + "_" + $(this).attr("id"));
$(this).attr("name", currentPrefix + i + "_" + $(this).attr("name"));
});
i++;
});
Workin小提琴: https://jsfiddle.net/EliteSystemer/8sx6rnwo/
Workin fiddle: https://jsfiddle.net/EliteSystemer/8sx6rnwo/
这篇关于如何以克隆形式(javascript)重命名所有ID?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!