АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
20 of 119 menu
Вышло новое интервью! Интервью дают мои ученики, которые уже устроились на работу в IT:) Жми, чтобы прочитать!

Метод wrap

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

Синтаксис

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

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

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

.wrap(function(номер в наборе));

Пример

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

<p class="www">text</p> <p class="www">text</p> <p class="www">text</p> <p>text</p> $('.www').wrap(document.createElement('div'));

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

<div><p class="www">text</p></div> <div><p class="www">text</p></div> <div><p class="www">text</p></div> <p>text</p>

Пример

Параметром можно передавать не только имя тега, но и следующую конструкцию:

<p class="www">text</p> <p class="www">text</p> <p class="www">text</p> <p>text</p> $('.www').wrap('<div></div>');

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

<div><p class="www">text</p></div> <div><p class="www">text</p></div> <div><p class="www">text</p></div> <p>text</p>

Пример

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

<p class="www">text</p> <p class="www">text</p> <p class="www">text</p> <p>text</p> $('.www').wrap('<div class="zzz"></div>');

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

<div class="zzz"><p class="www">text</p></div> <div class="zzz"><p class="www">text</p></div> <div class="zzz"><p class="www">text</p></div> <p>text</p>

Смотрите также

  • методы wrapAll, wrapInner, unwrap,
    позволяющие работать с оборачиванием элементов
enru