为选中结果添加添加一些包装元素，用的是 .wrap() 方法 … 包装结果里面的东西可以使用 .wrapInner() … .wrapAll() 可以给所有的结果一个单独的包装， 另外还有 .unwrap() 可以去掉包装元素 …

下面我们去试一下它们 … 先看一下我们要处理的这个文档 .. 这里有一些拥有 album 类的 <div> 标签 … 它的里面是 img 图像，还有一个 h6 标题 ..

比如我们想给 img 元素再添加一个包装元素 … 也就是这个包装元素是在 .album 类的元素的里面， img 这个元素的外面 …

回到浏览器 … 打开控制台 … 先去选择页面上的 img 元素 … 它是在 .album 这个类的元素下面 … 调用它们的 .wrap() 方法 …

去给它们添加一个包装 … 在方法里面可以指定包装的元素 .. 这里我们用一组 <div> 标签 … 在这个 <div> 标签上，我们可以再添加一个 class 属性 … 指定一个 css 类 …

$( '.album img' ).wrap( '<div class="thumbnail"></div>' );

回车 … 现在页面上的图像元素上都 有一个边框 … 这是因为我们在图像外面添加了一组 div 元素的包装.. 在这个元素上有 thumbnail 类 .. 这个边框的样式就是在这个类里定义的 …

打开开发者工具的 Elements 选项卡再去看看 …

图像的外面，有一组带有 .thumbnail 类的 <div> …

.wrapInner()

（#回到控制台）

使用 .wrapInner() 我们可以去包装选中的元素里面的东西 … 选刷新一下 … 这次我们选中 .alubm 类的元素 .. 去掉后面的 img

包装的元素同样是一组带有 .thumbnail 类的 <div> 标签 …

$( '.album' ).wrapInner( '<div class="thumbnail"></div>' );

这次你会发现，这个边框会应用到图像还有标题内容的上面 … 回到 Elements 选项卡 ..

这个包装元素，添加到了 .album 元素的里面 ... 包装的是 .album 类里的这个图像元素，还有标题元素 …

.wrapAll()

下面，我们再给所有 .album 类的元素添加一个统一的包装 … 用的方法是 .wrapAll() …

这个包装元素的类型同样是 div ，不过这里我们换一个 CSS 类 …

$( '.album' ).wrapAll( '<div class="jumbotron"></div>' );

现在，页面这四个带有 .album 类的元素会统一被一个 div 标签包装 … （#Elements）

这里你会看到，在它们周围，有一个共同的包装元素 …

.unwrap()

移除元素的包装用的是 .unwrap() 方法 … 用这个方法我们先移除掉为所有的 .album 添加的那个统一的包装 …

$( '.album' ).unwrap();

直接调用这个 unwrap() 方法，这个方法不支持参数 …

要移除掉图像和标题的包装 … 可以先选中图像或者标题 … 再去调用 .unwrap() 方法 …

$( '.album img' ).unwrap();

这样会去掉包装图像还有标题的元素 …