Представьте себе способ в jQuery, который позволит обернуть любой html тег или одинаковый набор тегов другими тегами, например, div-ом с определенным классом или стилем.
Это может быть полезным на html сайтах, где десятки страниц можно сразу поправить на jQuery. Например, если в футере сайта есть ссылка, которую надо обрамить дивом, то в обычном случае нам пришлось бы открывать все html страницы сайта и редактировать каждую, а за счет функции .wrap() сделать это одной строкой.
Обертывание содержимого элементов снаружи осуществляется функциями .wrap(), .wrapAll()
.wrap() – обертывает снаружи содержимое каждого выбранного элемента заданными html-элементами.
К примеру у нас есть два одинаковых элемента с классом .list5. Обернем каждый из них дивом с классом .snaryji
<span class="list5">Тег span</span>
<span class="list5">Тег span</span>
$(".list5").wrap("<div class='snaryji'></div>");
На выходе получим:
<div class="snaryji"><span class="list5">Тег span</span></div>
<div class="snaryji"><span class="list5">Тег span</span></div>
.wrapAll() – обертывает снаружи содержимое всех выбранных элементов заданными html-элементами.
Эта функция также заслуживает особого внимания. Понять ее работу легко из примера ниже. В нем также два дива .list5, которые обрамляются одним общим дивом .snaryji
<span class="list5">Тег span</span>
<span class="list5">Тег span</span>
$(".list5").wrapAll("<div class='snaryji'></div>");
В результате функции получим:
<div class="snaryji">
<span class="list5">Тег span</span>
<span class="list5">Тег span</span>
</div>
В обоих функциях не обязательно писать обрамляющий тег с закрытием. Можно использовать такую запись: <div class='snaryji' />
Сейчас мы изучили способы обрамления тегов снаружи, но есть еще более сложная (в понимании) функция, которая позволяет делать тоже самое, только внутри выбранного элемента.
.wrapInner() – обертывает изнутри содержимое выбранных элементов заданными html-элементами. Рассмотрим на примерах.
Пример 1 стандартный
<span class="list">Тег span</span>
$(".list").wrapInner("<div class='new'></div>");
Станет
<span class="list">
<div class="new">Тег span</div>
</span>
Пример 2 обернет только второй .list2
<span class="list2"><i>Тег span 3</i></span>
<span class="list2"><i>Тег span 4</i></span>
$(".list2").wrapInner( function(){
if($(this).find("i:contains('Тег span 4')").length != 0)
return '<div class="new"></div>';
else return ""; });
Станет
<span class="list2"><i>Тег span 3</i></span>
<span class="list2"><div class="new"><i>Тег span 4</i></div></span>
