.wrap( элементУпаковки )
Возвращает: jQuery
Описание: Обертывает структуру HTML вокруг каждого элемента в наборе соответствующих элементов.
.wrap( элементУпаковки )
Добавлена в версию: 1.0
Фрагмент HTML, выражение выбора, объект jQuery или элемент DOM определяющий структуру для обертывания вокруг соответствующих элементов.
.wrap( функцияУпаковки )
Добавлена в версию: 1.4
функцияУпаковки
Функция обратного вызова, которая генерирует структуру для обертывания вокруг соответствующих элементов.
Функция .wrap() может принять любую строку или объект, которые могут быть переданны в завод функций $() для задания структуры DOM. Эта структура может быть вложена в несколько уровней глубины, но должна содержать только один последний внутренний элемент. Структура будет оборачиваться вокруг каждого из элементов в наборе соответствующих элементов. Этот метод возвращает исходный набор элементов для построения цепочки целей.
Рассмотрим следующий HTML:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
Используя .wrap(), мы можем внести структуру HTML вокруг элемента<div class="inner">, как здесь:
$('.inner').wrap('<div class="new" />');
Элемент <div class="new"> создается на лету и добавляется к DOM. В результате <div class="new"> оборачивается вокруг каждого соответствующего элемента:
<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
Вторая версия этого метода позволяет нам определить функцию обратного вызова. Функция обратного вызова будет вызвана один раз для каждого соответствующего элемента; она должна вернуть элемент DOM, объект jQuery или фрагмент HTML, в который будет обернут соответствующий элемент. Например:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
Это приведет к тому, что каждый <div> будет иметь класс, соответствующий обертывающему тексту:
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
Примеры
Пример 1
Заключает все параграфы в документе в блок div.$("p").wrap("<div></div>");
Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrap("<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").wrap("<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").wrap("<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").wrap(document.createElement("div"));
Пример 3 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrap(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").wrap($(".doublediv"));
Пример 4 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrap($(".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>
Была ли эта информация полезной?
