1

Здравствуйте.

Есть некий скрипт, который должен добавить 3 раза один элемент после последнего tr#char_block_set.
Но добавляет почему-то только один. Подскажите, пожалуйста, как это поправить?

2 ответа 2

3

Для начала немного исправления ошибок:

  1. Не пытайтесь клонированировать элемент с id, на одной странице может быть только 1 элемент с id, поэтому создание нескольких таких элементов может вызвать проблемы.
  2. Чтобы убрать элемент со страницы, недостаточно просто стереть его содержимое в html, элемент останется, только пустой. Используйте, например, функцию detach().

Теперь до делу:

Суть работы функции clone() в том, что при создании с помощью неё элемента в DOM этот элемент будет добавляться только 1 раз, и все манипуляции с клоном будут происходить всегда с одним и тем же элементом. То есть добавление клона 3 раза, это всё равно что 3 раза поставить в конец очереди одного человека, человек всё равно останется один. В доказательство утверждения пример на основе данных автора. Клон добавляем 3 раза с разными классами, в итоге получается элемент, имеющий 3 класса, которые он получал по очереди при каждом новом добавлении на страницу.

Поэтому вам нужно делать 3 клона для добавления элемента несколько раз, но при этом вам нужно добавлять клоны в конец таблицы, убирая исходный элемент. Могу вам предложить такой вариант:

Исходную строку всё-таки называем классом, а не id. Для последней строки таблицы определяем class="last". Пишем функцию для клонирования элемента, при этом клонируем исходного клона char_b_tr каждый раз заново, если бы вам не нужно было убирать первоначальный элемент, то можно было бы клонировать сам элемент:

   function pasteClone() {
        var stroke = char_b_tr.clone().addClass("fsdfsdf" + i);
        $('.last').before(stroke);
        i++;
    }

С помощью detach() убираем исходный элемент. А далее вызываем функцию клонирования 3 раза.

Вот итоговый пример.

1
  • 1
    Спасибо большое за такой развёрнутный ответ.
    – Mr_Epic
    7 ноя 2014 в 12:20
3

Для мультиклонирования, можете добавить такое расширение jQuery

$.fn.duplicate = function(count, cloneEvents) {
    var tmp = [];
    for ( var i = 0; i < count; i++ ) {
        $.merge( tmp, this.clone( cloneEvents ).get() );
    }
    return this.pushStack( tmp );
};

Пример использования:

$('.char_block_set').duplicate(3).insertAfter('.char_block_set:last');

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.