Question

我有一个以这种方式克隆的表单（commonStuff）（和一个html页面，在jquery mobile中设计，表单多次出现，克隆）：

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

添加前缀＆＃39; form1 _＆＃39;，＆＃39; form_2＆＃39; （currentPrefix）到表单中任何元素的id和名称，并应用于commonClone（并递归到他的儿子）。

renameNodes(commonClone);

在文本输入（如

）的情况下，它可以完美地工作

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

但它在

等单选按钮上失败了

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

将重命名应用于外部div，例如＆＃39; fieldcontain＆＃39;和＆＃39; controlgroup＆＃39;。它可以工作，如果我删除这两个div但图形效果是不可接受的......

就目前而言，我遇到的问题是在最后一个问题，如果＆＃39;阻止它不关心兄弟姐妹，但我真的不知道如何解决这个问题。有什么想法吗？

编辑：此代码来自此答案How to create a tabbed html form with a common div

Answer 1

当你使用jQuery mobile时，jQuery将可用。我希望这段代码能指出你正确的方向：

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/ 考虑一下：

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

工作小提琴：https://jsfiddle.net/EliteSystemer/8sx6rnwo/

Answer 2

真的，这远非优雅，但无论如何都是一种解决方案。在任何节点中，这会手动搜索输入和标签，更改ID，名称以及＆＃39;标签的属性。

 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;

           var inputs = node.getElementsByTagName('input');
           for (i = 0; i < inputs.length; ++i) {
                inputs[i].id = currentPrefix + '_' + inputs[i].id;
                inputs[i].name = currentPrefix + '_' + inputs[i].name;
           }
           var labels = node.getElementsByTagName('label');
           for (i = 0; i < labels.length; ++i) {
                labels[i].setAttribute('for', currentPrefix + '_' + labels[i].getAttribute("for"));
           }
        } else if (node.children) {
           renameNodes(node.children);
        }
    }
 }

如何以克隆形式（javascript）重命名所有ID？

2 个答案: