Question

我正在尝试克隆DIV，它是内在的元素。如何更改所有内部元素的名称？我也在单选按钮上有函数调用。我还需要更改函数的名称。这是我的HTML代码。我感谢任何帮助。

<div id="clonableDiv">
    <input id="radio_1" type="radio1" onclick="toggleNames1()" value="Yes" name="Yes">
    Yes
    <br>
    <input id="radio_2" type="radio1" onclick="toggleNames2()" value="No" name="No">
    No
    <div id="address">Address:</div>
    <div id="address1">
        <input id="address_1" class="textBox" type="text" maxlength="100" name="address_1">
    </div>
    <div id="country_select">
        Country:
        <select id="country_drop_1" name="country_drop_1" onchange="setCountry(this.selectedIndex)"> 
            <option value="-1"></option>
            <option value="USA">USA</option>
            <option value="Canada">Canada</option>
        </select>
    </div>
</div>

Answer 1

这是一种克隆该div的方法，更新所有ID和名称，然后将克隆插入到正文中：

var cloneCntr = 1;
function makeClone() {
    // clone the div
    var clone = $("#clonableDiv").clone(false);
    // change all id values to a new unique value by adding "_cloneX" to the end
    // where X is a number that increases each time you make a clone
    $("*", clone).add(clone).each(function() {
        if (this.id) {
            this.id = this.id + "_clone" + cloneCntr;
        }
        if (this.name) {
            this.name = this.name + "_clone" + cloneCntr;
        }
    });
    ++cloneCntr;
    $(document.body).append(clone);                         

}

要更新onclick处理程序，您只需使用obj.onclick = fn;为其分配新值。

您可以在此处看到它：http://jsfiddle.net/jfriend00/r2RLw/。

如果您没有使用ID值并且只使用类名，则不需要克隆的大部分修复，但如果这是提交的表单的一部分，因此您需要唯一的名称值，那么您将克隆后必须做这种类型的固定。

Answer 2

坦率地说这听起来像是一件非常令人头痛的事情。每当我想要克隆大量元素时，我就不再使用ID并坚持使用类标识符。这样我就可以克隆整个元素集合，并通过父级和后面的层次结构唯一地标识它们。例如：

<div class="obj_Template">
    <span class="obj_SomeSpanChild1">Access Me!</span
    <span class="obj_SomeSpanChild2"><div class="obj_CountryName">USA</div></span>
</div>

var second = $(".obj_Template").clone().removeClass("obj_Template").addClass("obj_SecondElement");
second.insertAfter($(".obj_Template));

现在您有两个可识别的父元素，您可以使用相同的代码遍历它们。

Answer 3

var cloneCounter = 1;
var c = $('#clonableDiv').clone();
$('input, select', c).each(function(){
  var newName = $(this).attr('name');
  newName += '_' + cloneCounter;
  $(this).attr('name', newName);
})
cloneCounter++;
$('body').append(c);

你可以看到我在这里做的一个简单示例：http://jsfiddle.net/CQKpP/1/

Answer 4

您可以通过以下两种方式之一更改名称：

获取div的innerHtml，并使用聪明的正则表达式替换它
克隆div，迭代其子节点并更改其名称属性

这两个都有它们的优点，但id建议你的第二个。

克隆div及其内在元素

4 个答案: