Метод .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>