Клонирование элементов

Метод: .clone();

• Задача 1:

  - клонировать блок с классом first и разместить клон после элемента ul.

  Показать решение

  • Решение:

    $(function () {
    	$('div.first').clone().insertAfter('ul');
    });
    

    Пояснение:

    - Для решения задачи с помощью селектора $('div.first') находим блок с классом first на странице. С помощью метода .clone(); клонируем отобранный блок и с помощью метода .insertAfter('ul'); размещаем клон после элемента ul.

    Результат:

    При загрузке страницы, к которой подключен скрипт, после элемента ul будет размещена копия (включая все дочерние элементы) блока с классом first, если блок с таким классом присутствует на странице.

• Задача 2:

  - отобрать элементы div с классом first и элементы span с классом color на странице. Сделать так, что бы у содержимого блока с классом first по щечку левой кнопкой мыши изменялся цвет шрифта на #cc0000. Клонировать блок с классом first со всеми, примененными к нему, методами и все элементы span с классом color. Разместить копии отобранных элементов после элемента ul.

  Показать решение

  • Решение:

    $(function () {
    	$('div.first').click(function() {
    		$(this).css('color', 'red');
    	});
    	$('div.first, span.color').clone(true).insertAfter('ul');
    });
    

    Пояснение:

    - Для решения задачи с помощью селектора $('div.first') находим блок с классом first на странице. С помощью метода .click(function() { ... } и пользовательской функции $(this).css('color', 'red'); заставляем по клику на блоке изменить цвет шрифта для всех его дочерних элементов. С помощью селектора $('div.first, span.color') отберем в набор все элементы span с классом color и еще раз выберем блок с классом first, но уже с примененным к нему событием .click. С помощью метода .clone(true) получаем копии отобранных элементов со всеми методами, примененными к ним. С помощью метода .insertAfter('ul') размещаем копии отобранных элементов со всеми, примененными к ним, свойствами после элемента ul.

    Результат:

    При загрузке страницы, к которой подключен скрипт, после элемента ul будут размещены копии (включая все дочерние элементы) блока с классом first и элементов span с классом color. При клике по копии блока с классом first, все его дочерние элементы изменят цвет шрифта на красный (как и в оригинале).