.wrapInner( элементУпаковки )
Возвращает: jQuery
Описание: Обертывает структуру HTML вокруг каждого содержания каждого элемента в наборе соответствующих элементов.
.wrapInner( элементУпаковки )
Добавлена в версию: 1.2
Фрагмент HTML, выражение выбора, объект jQuery или элемент DOM определяющий структуру для обертывания вокруг содержания соответствующих элементов.
.wrapInner( функцияУпаковки )
Добавлена в версию: 1.4
функцияУпаковки
Функция обратного вызова, которая генерирует структуру для обертывания вокруг содержания соответствующих элементов.
Функция .wrapAll() может принять любую строку или объект, которые могут быть переданны в завод функций $() для задания структуры DOM. Эта структура может быть вложена в несколько уровней глубины, но должна содержать только один последний внутренний элемент. Структура будет оборачиваться вокруг содержания каждого элемента в наборе соответствующих элементов.
Рассмотрим следующий HTML:
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
Используя .wrapInner(), мы можем внести структуру HTML вокруг содержания элемента <div class="inner">, как здесь:
$('.inner').wrapInner('<div class="new" />');
Элемент <div class="new"> создается на лету и добавляется к DOM. В результате <div class="new"> оборачивается вокруг содержания каждого соответствующего элемента:
<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
Вторая версия этого метода позволяет нам определить функцию обратного вызова. Функция обратного вызова будет вызвана один раз для каждого соответствующего элемента; она должна вернуть элемент DOM, объект jQuery или фрагмент HTML, в который будет обернут соответствующий элемент. Например:
$('.inner').wrapInner(function() {
return '<div class="' + this.nodeValue + '" />';
});
Это приведет к тому, что каждый <div> будет иметь класс, соответствующий обертывающему тексту:
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>
Примеры
Пример 1
Выделяет все параграфы из документа и заключает их содержимое в тег b.$("p").wrapInner("<b></b>");
Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrapInner("<b></b>"); }); </script> <style>p { background:#bbf; }</style> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
Пример 2
Выделяет все параграфы из документа и заключает их содержимое в тег b.$("p").wrapInner(document.createElement("b"));
Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p").wrapInner(document.createElement("b")); }); </script> <style>p { background:#9f9; }</style> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
Пример 3
Обертывает вновь созданное дерево объектов вокруг содержания тела документа.("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
Пример 3 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>"); }); </script> <style> div { border:2px green solid; margin:2px; padding:2px; } p { background:yellow; margin:2px; padding:2px; } </style> </head> <body> Plain old text, or is it? </body> </html>
Пример 4
Обертывает вновь созданное дерево объектов вокруг содержания тела документа.$("p").wrapInner($("<span class='red'></span>"));
Пример 4 - Полный код:
<!DOCTYPE html>
<html>
<head>
<style>
p { background:#9f9; }
.red { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("p").wrapInner($("<span class='red'></span>"));
});
</script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</body>
</html>
Была ли эта информация полезной?
