返回值:jQuerywrapAll(wrappingElement)

将所有匹配的元素作为一个整体，并在其外部包裹一个 HTML 结构。

任何可传给 $() 工厂的字符串或对象，都可以作为 .wrapAll() 函数的参数，表示包裹用的 DOM 结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

假如有下面的 HTML:

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

使用 .wrapAll()，我们可以将含有 inner 样式的 <div> 看成一个整体，在这个整体的外部包裹一个 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>
<head>
<style>

  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
  </style>
<script src="jquery.min.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>
<head>
<style>

  div { border:2px blue solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  strong { color:red; }
  </style>
<script src="jquery.min.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>
<head>
<style>

  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<p>Hello</p>
  <p>cruel</p>
  <p>World</p>

<script>

$("p").wrapAll(document.createElement("div"));

</script>
</body>
</html>

演示:

示例:

使用一个嵌套深度为两层 div 的 jQuery 对象来包裹所有的段落。注意，这并不会移动用于包裹的对象，只是将克隆后的对象用于包裹。

<!DOCTYPE html>
<html>
<head>
<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="jquery.min.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>

演示: