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