Когда полезна функция клонирования jQuery?

Одна из проблем изучения библиотеки (будь то стандартная библиотека функций, поставляемая с языком программирования или сторонним проектом) состоит из двух частей:

1. изучение доступных функций,
2. научиться использовать указанные функции.

И, действительно, иногда даже научиться использовать указанные функции не так уж и сложно — нужно знать, когда использовать данную функцию, чтобы минимизировать код и при этом достичь целей проекта.

Функция клонирования jQuery

Одним из примеров, который приходит на ум, является использование функции клонирования jQuery. Определение функции простое:

Метод .clone() выполняет глубокое копирование набора совпадающих элементов, то есть он копирует совпадающие элементы, а также все их дочерние элементы и текстовые узлы.

Преимущество этой функции в том, что она также может создавать «поверхностную» копию функции. Это означает, что вы можете копировать элементы без обработчиков событий, дочерних элементов и т. д.

В зависимости от ваших потребностей, один будет более ценным, чем другой. Но для этого поста предположим, что нам нужна глубокая копия.

1 Возможный вариант использования

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

• возможно появится модальный диалог,
• возможно что-то отправляется на сервер через асинхронный запрос,
• возможно, представление страницы нужно изменить,
• и т.п.

Я не знаю. Каким бы ни был ваш случай, допустим, у вас есть изображение или набор изображений, и вам нужно отобразить модальное диалоговое окно при нажатии на него.

2 Настройка кода

Для этого нам нужно сделать несколько вещей:

1. добавить настраиваемый атрибут к изображениям, чтобы мы могли прикреплять соответствующие обработчики событий,
2. настроить партиал с разметкой, которую мы хотим отобразить с данным фрагментом HTML,
3. использование клона для использования преимущества части, которую мы написали, и дублирование ее по мере необходимости.

Шаг 1

Если вы работаете с WordPress и ищете, как добавить пользовательские атрибуты изображения, вы можете посмотреть руководство, как это сделать, в этом посте.

Шаг 2

Создать партиал просто. Код может быть таким же простым, как следующий фрагмент :

<p class="acme-element">
    <span>Acme</span>
</p><!--- .acme-element -->

И да, вы можете украсить его небольшим количеством CSS и добавить некоторый собственный код к одному из элементов с помощью PHP, но это охватывает абсолютные основы.

Шаг 3

Теперь предположим, что для каждого изображения, существующего на странице (с настраиваемым атрибутом, например, data-type="acme» ), мы хотим добавить копию вышеуказанного элемента на страницу, связанную с каждым из изображений на странице.

Для этого нам нужно знать:

1. при нажатии на элемент,
2. это родительский элемент,
3. и как добавить элемент с помощью  метода клонирования.

Итак, во-первых, мы хотим определить, когда нажимается данное изображение. Для этого мы можем перебрать все изображения на странице, чтобы прикрепить собственный обработчик событий:

// Loop through each of the image with the custom data-types on the page.
$('img[data-type="acme"]').each(function() {

  // ...

});

Затем, когда изображение щелкнули, мы находим родительский элемент изображения, по которому щелкнули (и тогда происходит основная часть работы ).

То есть мы берем копию элемента ранее в посте, клонируем ее и добавляем в контейнер:

var $this, $parent, $clone;

// Loop through each of the image with the custom data-types on the page.
$('img[data-type="acme"]').each(function() {

  $this = $(this);
  $(this).on('click', function() {

    // Reference the parent of the image that was clicked and clone the element.
    $parent = $this.parent();
    $clone  = $('.acme-element').clone(true);

    // Next, append the cloned element to the parent.
    $parent.append($clone);

  });
});

И тогда мы можем работать с каждым отдельно.

Несколько ошибок

При клонировании элементов необходимо помнить несколько вещей (о которых говорилось выше). Конкретно:

• помните, что вам могут понадобиться элементы клонирования по-разному в зависимости от обработчика событий,
• вам может потребоваться создать пользовательские идентификаторы для данного элемента, прежде чем добавлять его на страницу,
• возможно, элемент нужно переключать, когда что-то нажимается,
• и так далее.

Существует множество способов обработки клонированного элемента, но всякий раз, когда вы это делаете, убедитесь, что при клонировании элемента вы правильно идентифицируете и управляете событиями, чтобы не получить ошибочных результатов.