Метод .wrap() оборачивает элементы в заданный тег.

См. также методы wrapAll, wrapInner, unwrap.

См. также урок манипулирование элементами страницы через jQuery для более полного понимания.

Синтаксис

Параметром метода может служить текст (возможно с тегами), DOM элемент или объект jQuery: 

.wrap(чем обернуть)

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

.wrap(function())

Примеры

Пример

Обернем все абзацы с классом .www тегом div: 

<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
$('.www').wrap('div');

HTML код станет выглядеть так: 

<div><p class="www">Абзац.</p></div>
<div><p class="www">Абзац.</p></div>
<div><p class="www">Абзац.</p></div>
<p>Абзац.</p>

Пример

Параметром можно передавать не только имя тега, но и такую конструкцию - '<div></div>' - в этом случае эффект будет абсолютно такой же: 

<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
$('.www').wrap('<div></div>');

HTML код станет выглядеть так: 

<div><p class="www">Абзац.</p></div>
<div><p class="www">Абзац.</p></div>
<div><p class="www">Абзац.</p></div>
<p>Абзац.</p>

Пример

В открывающий тег (в нашем случае див <div>) можно писать любые атрибуты, при этом оборачивание будет вместе с этими атрибутами. Давайте обернем абзацы с классом .www дивом с классом zzz: 

<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
$('.www').wrap('<div class="zzz"></div>');

HTML код станет выглядеть так: 

<div class="zzz"><p class="www">Абзац.</p></div>
<div class="zzz"><p class="www">Абзац.</p></div>
<div class="zzz"><p class="www">Абзац.</p></div>
<p>Абзац.</p>