.wrapAll( элементУпаковки )
Возвращает: jQuery
Описание: Обертывает структуру HTML вокруг всех элементов в наборе соответствующих элементов.
.wrapAll( элементУпаковки )
Добавлена в версию: 1.2
Фрагмент HTML, выражение выбора, объект jQuery или элемент DOM определяющий структуру для обертывания вокруг соответствующих элементов.
Функция .wrapAll() может принять любую строку или объект, которые могут быть переданны в завод функций $() для задания структуры DOM. Эта структура может быть вложена в несколько уровней глубины, но должна содержать только один последний внутренний элемент. Структура будет оборачиваться вокруг всех элементов в наборе соответствующих элементов, как единая группа.
Рассмотрим следующий HTML:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
Используя .wrap(), мы можем внести структуру HTML вокруг элемента <div class="inner">, как здесь:
$('.inner').wrapAll('<div class="new" />');
Элемент <div class="new"> создается на лету и добавляется к DOM. В результате <div class="new"> оборачивается вокруг всех соответствующих элементов:
<div class="container">
<div class="new">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</div>
Примеры
Пример 1
Заключает все параграфы на странице в новый элемент div.$("p").wrapAll("<div></div>");
Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrapAll("<div></div>"); }); </script> <style> div { border: 2px solid blue; } p { background:yellow; margin:4px; } </style> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
Пример 2
Заключает все блоки span в только что созданное дерево объектов. Обратите внимание, все, что находится за границами блока span, остается неизменным (например, красный текст в блоке <strong> в этом примере).$("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");
Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>"); }); </script> <style> div { border:2px blue solid; margin:2px; padding:2px; } p { background:yellow; margin:2px; padding:2px; } strong { color:red; } </style> </head> <body> <span>Span Text</span> <strong>What about me?</strong> <span>Another One</span> </body> </html>
Пример 3
Заключает все параграфы на странице в новый элемент div.$("p").wrapAll(document.createElement("div"));
Пример 3 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrapAll(document.createElement("div")); }); </script> <style> div { border: 2px solid blue; } p { background:yellow; margin:4px; } </style> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
Пример 4
Заключает все параграфы на странице в объект jQuery, который представляет собой двойной элемент div.$("p").wrapAll($(".doublediv"));
Пример 4 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrapAll($(".doublediv")); }); </script> <style> div { border: 2px solid blue; margin:2px; padding:2px; } .doublediv { border-color:red; } p { background:yellow; margin:4px; font-size:14px; } </style> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> <div class="doublediv"><div></div></div> </body> </html>
Была ли эта информация полезной?
