Обертывание элементов страницы

.wrap()  .wrapAll()

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

.wrap(content), .wrapAll(content) :jQuery v:1.0, v:1.2
выбранные элементы будут “обернуты” содержимым content, которое может быть задано html-текстом, объектом jQuery или DOM объектом. Различия методов заключается в том, что wrap оборачивает каждый выбранный элемент по отдельности, а wrapAll оборачивает все элементы сразу. Метод wrap включен в библиотеку начиная с версии 1.0, а wrapAll только с версии 1.2
.wrap(function()) :jQuery >v:1.4
выбранные элементы обертываются содержимым, которое будет возвращено в виде html-текста, пользовательской функцией. Функция вызывается отдельно, для каждого из выбранных элементов.

Примеры

Допустим страница содержит следующий текст:

 <ul class="list l1">
   <li class="item"> Высоко </li>	
   <li class="item"> Быстро </li>	
   <li class="item"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item"> Выше </li>	
   <li class="item"> Быстрее </li>	
   <li class="item"> Сильнее </li>	
 </ul>

для того, что бы “обернуть” по отдельности списки div-элементами можно использовать следующий код:

 $(".list").wrap("<div class='new'></div>");

в итоге страница станет такой:

 <div class="new">
   <ul class="list l1">
     <li class="item"> Высоко </li>	
     <li class="item"> Быстро </li>	
     <li class="item"> Сильно </li>	
   </ul>
 </div>
 <div class="new">
   <ul class="list l2">
     <li class="item"> Выше </li>	
     <li class="item"> Быстрее </li>	
     <li class="item"> Сильнее </li>	
   </ul>
 </div>

а воспользовавшись функцией wrapAll мы “обернем” списки одним общим div-элементом:

 $(".list").wrapAll("<div class='new'></div>");

в итоге получим:

 <div class="new">
   <ul class="list l1">
     <li class="item"> Высоко </li>	
     <li class="item"> Быстро </li>	
     <li class="item"> Сильно </li>	
   </ul>
   <ul class="list l2">
     <li class="item"> Выше </li>	
     <li class="item"> Быстрее </li>	
     <li class="item"> Сильнее </li>	
   </ul>
 </div>

Если окажется, что обвертываемые с помощью функции wrapAll элементы находятся в разных местах или просто разделены какими то другими элементами, то jQuery в начале соберет элементы в одном месте и только потом “обернет” их заданным содержимым. Например:

 $(".item").wrapAll("<div class='new'></div>");

приведет к следующему:

 <ul class="list l1">
   <div class="new">
     <li class="item"> Высоко </li>	
     <li class="item"> Быстро </li>	
     <li class="item"> Сильно </li>	
     <li class="item"> Выше </li>	
     <li class="item"> Быстрее </li>	
     <li class="item"> Сильнее </li>	
   </div>
 </ul>
 <ul class="list l2"> </ul>

Рассмотрим пример с использованием пользовательской функции. “Обернем” элемент списка только если этот элемент содержит текст “Быстро”:

 $(".item").wrap( function(){
   if($(this).text() == " Быстро ")
     return "<div class='new'></div>";
   else
     return "";
 });

в итоге, текст первоначальной страницы станет следующим:

 <ul class="list l1">
   <li class="item"> Высоко </li>
   <div class="new">	
     <li class="item"> Быстро </li>
   </div>
   <li class="item"> Сильно </li>	
 </ul>
 <ul class="list l2">
   <li class="item"> Выше </li>
   <li class="item"> Быстрее </li>
   <li class="item"> Сильнее </li>
 </ul>

Надеюсь вам было понятно.