Коли функція клонування 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);

  });
});

І тоді ми можемо працювати з кожним окремо.

Кілька проблем

Під час клонування елементів вам потрібно пам’ятати кілька речей (згаданих вище). зокрема:

• пам’ятайте, що вам можуть знадобитися елементи клону по-різному залежно від обробника подій,
• вам може знадобитися створити користувацькі ідентифікатори для певного елемента перед додаванням його на сторінку,
• можливо, елемент потрібно перемикати, коли щось натискається,
• і так далі.

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