.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]