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

Материал из JQuery

Перейти к: навигация, поиск
.wrap()  .wrapAll()

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

.wrap(content), .wrapAll(content):jQuery1.0, 1.2
выбранные элементы будут "обернуты" содержимым content, которое может быть задано html-текстом, объектом jQuery или DOM объектом. Различия методов заключается в том, что wrap оборачивает каждый выбранный элемент по отдельности, а wrapAll оборачивает все элементы сразу. Метод wrap включен в библиотеку начиная с версии 1.0, а wrapAll только с версии 1.2
.wrap(function()):jQuery1.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>

Ссылки

Поисковые ключи:
  • обернуть вокруг элементов заданное содержимое
  • вокруг элементов "обернуть" заданное содержимое
  • окружить объекты на странице заданными html элементами
  • .wrap()
  • wrap()
Поисковые ключи:
  • .wrapAll()
  • wrapAll()