Обертывание элементов страницы
Функции помещают заданное содержимое вокруг выбранных элементов (как бы "обертывая" их). Имеется два варианта использования функций:
Примеры
Допустим страница содержит следующий текст:
<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>