Клон DIV и его содержимое с новыми идентификаторами [дубликаты]

0

Я пытаюсь клонировать 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);
});

jsFiddle

До сих пор я клонировал весь сам div и увеличивал ids, но элементы внутри остались прежними. Как я могу получить все элементы внутри div для увеличения на единицу?

  • 1
    @Diodeus Поверь мне, я знаю, как использовать этот сайт. Я просмотрел несколько примеров, и у меня возникли проблемы с тем, чтобы заставить его работать так, как мне нужно.
  • 2
    Просто подсказка - как правило - наличие последовательных идентификаторов или идентификаторов с номерами указывает на более глубокую проблему проектирования. Зачем вам нужны последовательные идентификаторы?
Показать ещё 4 комментария
Теги:

4 ответа

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

Поделиться
  • 0
    Я чувствую, что должен добавить, что replace будет работать только для первого вхождения строки amount , чего в данном случае бывает достаточно, но если вы хотите иметь несколько замен, используйте регулярные выражения
  • 0
    Что вы имеете в виду? Кажется, это работает довольно хорошо.
Показать ещё 1 комментарий
1

Вы можете рекурсивно заменить все 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. Затем просто замените номер числа в id каждого ребенка (и self).

Поделиться
0

Попробуйте добавить это:

$('#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/

Поделиться
0

Эти другие ответы близки, но проблема с их решениями заключается в том, что исходные идентификационные префиксы теряются: 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);
    })
});

И рабочий пример

Поделиться
  • 0
    Почему это получит отрицательный голос? Это выполняет то, что просит пользователь.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню