Обертывание элементов. Метод wrap

В предыдущем параграфе мы вставляли дочерние элементы в уже существующий элемент. Но также мы можем создать новый элемент и обернуть в него уже существующие. Для этого используется метод wrap() и похожие методы wrapAll() и wrapInner(). Например, нам может потребоваться обернуть некоторые элементы в новый элемент div. Для этого мы и прибегаем к вышеназванным методам.

Метод wrap

Метод wrap обертывает элементы выборки тем элементом, которые передается в качестве аргумента в данный метод. Он имеет следующие варианты использования:

• wrap('разметка html'): обертывает элементы выборки в элемент, создаваемый из разметки html

• wrap(элемент): обертывает элементы выборки в элемент html, переданный в качестве параметра

• wrap('селектор'): обертывает элементы выборки в элемент документа, соответствующий селектору

• wrap(jQuery): обертывает элементы выборки в объект jQuery

• wrap(функция): обертывает элементы выборки в объект, возвращаемый функцией

Пусть у нас есть следующая разметка:

<ul class="langs">
	<li>Java</li>
	<li>C/C++</li>
	<li>PHP</li>
</ul>

Обернем список с помощью метода wrap :

	$('.langs').wrap('<div class="redStyle"></div>');

После этого разметка будет выглядеть следующим образом:

<div class="redStyle">
<ul class="langs">
	<li>Java</li>
	<li>C/C++</li>
	<li>PHP</li>
</ul>
</div>

Подобным образом мы можем использовать и другие способы использования метода wrap:

	var header = document.getElementById('header');
	$('.langs').wrap(header);

Обратите внимание, что в данном случае список вставляется не в существующий элемент, а просто существующий элемент клонируется, и в эту копию обертывается список.

Метод wrapAll

Для обертки всех элементов выборки как единого целого в один элемент используется метод wrapAll. Он имеет похожие варианты использования:

• wrapAll('разметка html'): обертывает все элементы выборки в один элемент, создаваемый из разметки html

• wrapAll(элемент): обертывает все элементы выборки в один элемент html, переданный в качестве параметра

• wrapAll('селектор'): обертывает все элементы выборки в один элемент, соответствующий селектору

• wrapAll(jQuery): обертывает все элементы выборки в один объект jQuery

Например, имеется следующая разметка:

<div class="lang">Java</div>
<div class="lang">C/C++</div>
<div class="lang">PHP</div>

Обернем все эти элементы в один элемент div:

	$('.lang').wrapAll('<div class="langs"></div>');

После этого разметка будет выглядеть следующим образом:

<div class="langs">
	<div class="lang">Java</div>
	<div class="lang">C/C++</div>
	<div class="lang">PHP</div>
</div>

Метод wrapInner

Для обертки содержимого элементов в новый элемент служит метод wrapInner. Он имеет следующие варианты использования:

• wrapInner('разметка html'): обертывает содержимое элементов выборки в элемент, создаваемый из разметки html

• wrapInner(элемент): обертывает содержимое элементов выборки в элемент html, переданный в качестве параметра

• wrapInner('селектор'): обертывает содержимое элементов выборки в элемент документа, соответствующий селектору

• wrapInner(jQuery): обертывает содержимое элементов выборки в объект jQuery

• wrapInner(функция): обертывает содержимое элементов выборки в объект, возвращаемый функцией

Исходная разметка будет выглядеть так:

<ul>
<li class="lang">Java</li>
<li class="lang">C/C++</li>
<li class="lang">PHP</li>
</ul>

Обернем содержимое элементов списка в теги <p>:

	$('li.lang').wrapInner('<p></p>');

Финальная разметка будет выглядеть так:

<ul>
	<li class="lang"><p>Java</p></li>
	<li class="lang"><p>C/C++</p></li>
	<li class="lang"><p>PHP</p></li>
</ul>