.wrap()
返回: jQuery
.wrap( wrappingElement )
描述：在匹配的元素集合中的每个元素周围包裹一个HTML结构。
加入于: 1.0
.wrap( wrappingElement )- wrappingElement一个HTML片段、选择器表达式、jQuery对象，或者DOM元素，用来指定要在匹配的元素周围包裹的结构。如果你传递了一个jQuery集合，包含了不止一个元素，或者一个选择器，匹配了不止一个元素，只会使用第一个元素。
加入于: 1.4
.wrap( function ).wrap()函数可以取用任何可以传递给$()函数的字符串或对象，以指定一个DOM结构。这个结构可以嵌套多层深度，但是必须只有一个最内层的元素。该结构的一个副本将用来包裹在匹配的元素集合中每个元素周围。这个方法返回元素的原始集合，可用于连缀。
设想下面的HTML：
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
使用.wrap()，我们可以在这个class="inner"的div元素上周围插入一个HTML结构，如下所示：
$( ".inner" ).wrap( "<div class='new'></div>" );
快速创建了新的<div>，并把它添加到DOM中。结果是一个新的DOM包裹在每个匹配的元素周围：
<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>都有一个对应于它包裹的文本的样式类：
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
示例
在所有的段落文本周围包裹一个新div。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrap 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" ).wrap( "<div></div>" );
</script>
</body>
</html>
演示结果
在<span>周围包裹一个新创建的对象树。注意，<span>之间的任何元素都不会被包裹，比如说例子中使用的<strong>（红色文本）。即使是<span>之间的空格也不会被包裹。点击“View Source”以查看原始HTML。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrap 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" ).wrap( "<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>wrap 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" ).wrap( document.createElement( "div" ) );
</script>
</body>
</html>
演示结果
在所有的段落文本周围包裹一个jQuery对象，它是一个双层深度的div。注意，它没有移动对象，仅仅是克隆对象以包裹目标。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>wrap 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" ).wrap( $( ".doublediv" ) );
</script>
</body>
</html>
演示结果