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

Материал из JQuery

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

"Обертывает" содержимое выбранных элементов заданными html-элементами. Таким образом получается, что все выбранные объекты "обертываются изнутри". Имеется два варианта использования этой функции:

.wrapInner(content):jQuery1.2
"Обертывает изнутри" выбранные элементы заданным содержимым content, которое может быть задано html-текстом, объектом jQuery или DOM объектом.
.wrapInner(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>

воспользовавшись функцией wrapInner "обернем" списки изнутри, div-элементами:

 $("ul").wrapInner("<div class="new"></div>");

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

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


Рассмотрим пример с использованием пользовательской функции. "Обернем изнутри" только те списки, в которых есть текст "Быстро":

 $("ul").wrapInner( function(){
   if($(this).find("li:contains('Быстро')").length != 0)
     return '<div class="new"></div>';
   else
     return "";
 });

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

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

Ссылки

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