Question

我正在尝试克隆div及其中的输入元素。当我克隆它时，我希望所有的id增加一个。我已经做了一个小提示，告诉你我在做什么。

$("#add").click(function (e) {
    var amount = $('div.classes').length;
    var new_amount = amount + 1;
    var cloned_div = $('#class-' + amount);
    $(cloned_div).clone().attr('id', 'class-' + new_amount).insertAfter('#class-' + amount);
});

jsFiddle

到目前为止，我已经克隆了整个div本身并且id增加但内部元素保持不变。如何让div中的所有元素增加1？

Answer 1

你克隆了整个div而没有修改它的内容。尝试类似：

$("#add").click(function (e) {
    var amount = $('div.classes').length;
    var new_amount = amount + 1;
    var cloned_div = $('#class-' + amount);
    $(cloned_div).clone().attr('id', 'class-' + new_amount).insertAfter('#class-' + amount).find('input').each(function (i, e) {
        $(e).attr('id', $(e).attr('id').replace(amount, new_amount));
    });
});

DEMO

Answer 2

您可以使用id / find递归替换所有replace：

$("#add").click(function (e) {
    var amount = $('div.classes').length;
    var new_amount = amount + 1;
    var cloned_div = $('#class-' + amount).clone();
    cloned_div.insertAfter('#class-' + amount);
    cloned_div.find('[id$="-' + amount + '"]').andSelf().each(function(index, child) {
        child.id = child.id.replace("-" + amount, "-" + new_amount);
    });
});

请参阅jsFiddle

cloned_div.find('[id$="-' + amount + '"]')将搜索id属性以"-" + amount结尾的所有子元素，.andSelf()将包含克隆的div，因为您要更改id还有。然后只需替换每个孩子{和{1}}中的数字部分（和自己）。

Answer 3

尝试添加此内容：

$('#class-' + new_amount + ' input:nth-child(1)').attr('id', 'name-class-' + new_amount);
$('#class-' + new_amount + ' input:nth-child(2)').attr('id', 'number-class-' + new_amount);
$('#class-' + new_amount + ' input:nth-child(3)').attr('id', 'book-class-' + new_amount);

就在$(cloned_div).clone()声明之下。

看到它的实际效果：

http://jsfiddle.net/ZHHcA/1/

Answer 4

这些其他答案很接近，但他们的解决方案的问题是原始ID前缀丢失：number-class-1正变为class-1，这是不理想的。

这是一个更好的选择：

$("#add").click(function (e) {
    var amount = $('div.classes').length;
    var new_amount = amount + 1;
    var cloned_div = $('#class-' + amount);
    var $cloned = $(cloned_div).clone().attr('id', 'class-' + new_amount).insertAfter('#class-' + amount);

    $cloned.children().each(function(){
        var $child = $(this);
        var oldID = $child.attr('id');
        var newID = oldID.replace(/[0-9]+$/, new_amount); // replace just the number, leave the rest of the ID name in tact
        $child.attr('id', newID);
    })
});

正在运作 example

用新的ID克隆DIV及其内容

4 个答案: