От автора: приветствую вас, друзья. В этой статье мы продолжим знакомиться с методами, позволяющими осуществлять манипуляции с элементами DOM, а именно: добавление, удаление и изменение элементов DOM.
Начнем статью с изучения двух методов: wrap и wrapAll. Данный функции позволяют обернуть выбранный элементы (или элементы) в любой другой элемент. Например, у нас есть некий список ul, который мы хотим обернуть в блок div. Это без проблем может сделать метод wrap:
|
1 |
$('.content ul').wrap('<div class="wrap" style="border: 1px solid red;"></div>'); |
А что если у нас несколько списков ul? Давайте посмотрим, как поведет себя метод wrap в этом случае.
Как видим, каждый из списков метод wrap завернул в div. Но иногда может потребовать не каждый элемент в отдельности обернуть, а все элементы обернуть в один элемент. Для этого есть метод wrapAll, давайте попробуем использовать его:
|
1 |
$('.content ul').wrapAll('<div class="wrap" style="border: 1px solid red;"></div>'); |
Думаю, разница в использовании методов wrap и wrapAll понятна. Иногда может потребоваться обернуть не сам элемент, а его внутренние элементы, т.е. его потомков. Допустим, у нас есть следующий список:
|
1 2 3 4 5 |
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> |
И мы хотим текст внутри элементов списка обернуть в ссылки. В этом случае можно использовать метод wrapInner в jQuery:
|
1 |
$('.content ul li').wrapInner('<a href="#"></a>'); |
И последний метод, с которым мы познакомимся сегодня, это метод clone. Данный метод клонирует, т.е. возвращает копию выбранного элемента. Это может пригодиться в том случае, когда мы хотим дублировать элемент на странице. Например, у нас есть один список, который мы хотим клонировать и вставить в начало блока content. Также мы хотим обернуть клонированный список в блок div с рамкой. Вот как это можно сделать, используя методы jQuery:
|
1 |
$('.content ul').clone().prependTo(".content").wrap('<div style="border: 1px solid red"></div>'); |
На этом мы завершим текущую статью. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!
