.wrapAll()
返回: jQuery
.wrapAll( wrappingElement )
描述：在匹配的元素集合的所有元素周围包裹一个HTML结构。
加入于: 1.2
.wrapAll( wrappingElement )- wrappingElement一个HTML片段、选择器表达式、jQuery对象，或者DOM元素，用来指定要在匹配的元素周围包裹的结构。
加入于: 1.4
.wrapAll( function ).wrapAll()函数可以取用任何可以传递给$()函数的字符串或对象，以指定一个DOM结构。这个结构可以嵌套多层深度，但是必须只有一个最内层的元素。这个结构将包裹匹配元素集合中的所有元素，作为一个组。
设想下面的HTML：
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
使用.wrapAll()，我们可以在<div class="inner">元素周围插入一个HTML结构，如下所示：
$( ".inner" ).wrapAll( "<div class='new' />");
快速创建了新的<div>，并把它添加到DOM中。结果是一个新的DOM包裹在所有匹配的元素周围：
<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-1.10.2.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>之间的空格也不会被包裹。点击“View Source”以查看原始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-1.10.2.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-1.10.2.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-1.10.2.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>
演示结果