Маніпуляція з елементами jQuery. Частина 3

1

Від автора: вітаю вас, друзі. У цій статті ми продовжимо знайомитися з методами, що дозволяють здійснювати маніпуляції з елементами DOM, а саме: додавання, видалення і зміна елементів DOM.

Почнемо статтю з вивчення двох методів: wrap і wrapAll. Даний функції дозволяють обернути вибраний елемент (або елементи) в будь-який інший елемент. Наприклад, у нас є певний список ul, який ми хочемо обернути в блок div. Це без проблем може зробити метод wrap:

$(‘.content ul’).wrap(‘

‘);

Манипуляция с элементами в jQuery

А що якщо у нас кілька списків ul? Давайте подивимося, як поведеться метод wrap в цьому випадку.

Манипуляция с элементами в jQuery

Як бачимо, кожен із списків метод wrap загорнув у div. Але іноді може зажадати не кожен елемент окремо обернути, а всі елементи обернути в один елемент. Для цього є метод wrapAll, давайте спробуємо використовувати його:

$(‘.content ul’).wrapAll(‘

‘);

Манипуляция с элементами в jQuery

Думаю, різниця у використанні методів wrap і wrapAll зрозуміла. Іноді може знадобитися обернути не сам елемент, а його внутрішні елементи, тобто його нащадків. Припустимо, у нас є наступний список:

  • Item 1
  • Item 2
  • Item 3

І ми хочемо текст всередині елементів списку обернути у посилання. В цьому випадку можна використовувати метод wrapInner в jQuery:

$(‘.content ul li’).wrapInner(«);

Манипуляция с элементами в jQuery

І останній метод, з яким ми познайомимося сьогодні, це метод clone. Даний метод клонує, тобто повертає копію вибраного елемента. Це може стати в нагоді в тому випадку, коли ми хочемо дублювати елемент на сторінці. Наприклад, у нас є один список, який ми хочемо клонувати і вставити в початок блоку content. Також ми хочемо обернути клонований список блок div з рамкою. Ось як це можна зробити, використовуючи методи jQuery:

$(‘.content ul’).clone().prependTo(«.content»).wrap(‘

‘);

Манипуляция с элементами в jQuery

На цьому ми завершимо поточну статтю. Більше про jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!