.wrap – помещает выбранные элементы внутрь заданного элемента (как бы “обертывая” их).

Имеется два варианта использования функции.

.wrap( wrappingElement )

Выбранные элементы будут “обернуты” содержимым wrappingElement.

• wrappingElement – html-текст, объект jQuery или DOM объект, внутрь которого будут помещены выбранные элементы.

.wrap( function )

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

• function – функция, которая возвращает html-содержимое и вызывается для каждого элемента в наборе.

Пример 1

При нажатии кнопки, блоки с классом inner будут обернуты блоком с классом new

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”mWPpav” default_tab=”js,result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/mWPpav/’>mWPpav</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Пример 2

При нажатии кнопки, блоки с классом inner будут обернуты блоком с классом, который вернет функция – текстовое содержимое блока. Т.е. первый блок будет обернут в <div class="Hello"></div> (синяя рамка), а второй в <div class="Goodbye"></div> (красная рамка)

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”EWKoMb” default_tab=”js,result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/EWKoMb/’>EWKoMb</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]