Обертывание содержимого элементов страницы
.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>