jQuery方法wrapAll()

在慕课网学习jQuery时，看到教程在讲述wrapAll()时说道：

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

通过回调的方式可以单独处理每一个元素。

简单的看一段代码：

<p>p元素</p>
<p>p元素</p>

$('p').wrapAll(function() {
return '<div><div/>';
})

以上的写法的结果如下，等同于warp的处理了

<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>

这种说法让我很疑惑，wrapAll()里面传入回调函数，效果不应该跟wrapAll()一样用一个元素包裹所有匹配元素吗？wrapAll的原意就是“包裹所有”，用它实现每个匹配元素的单独的包裹显得有点古怪了。

顺便总结一下

• wrap()将所有匹配的元素进行单独的包裹,在原来的元素的外部实施包裹

• wrapAll()将匹配的元素集合当做一个整体来包裹，在元素的外部实施包裹
  
•  wrapInner()经所有匹配的元素进行单独的包裹，在原来的元素额内部实施包裹

最近翻阅了jQuery官方文档后，发现jQuery3.0以上的版本已经修正了这个bug。

下面看个对比：

html结构
<div class="left">
  <a>a元素</a>
  <a>a元素</a>
</div>

<button id="btn">增加父容器div</button>
相关的css代码：
 .left div {
        background: #bbffaa;
    }
复制代码

$(#btn).click(function() {
    $("a").wrapAll( function() {
        return "<div></div>"
    })
})复制代码

在jQuery 3.0以下版本，a元素会分别被两个新加的<div>元素包裹

在开发者工具下是这样显示：

而在jQuery 3.0以上版本，两个a元素会被以一个新的<div>元素包裹。

在开发者工具下是这样显示：

很显然，这才是我们要的结果。

如果wrapAll()匹配的元素不在一个父元素下，会如何显示呢？

<div class="right">
    <p>p元素</p>
    <p>p元素</p>
    <p>p元素</p>
</div>
<div class="left">
    <p>p元素</p>
    <a>a元素</a>
    <a>a元素</a>
</div>
<button id="btn">增加父容器div</button>

相关的css代码：
 .left div {
        background: #bbffaa;
    }
 .right div {
        background: yellow;
    }
复制代码

$(#btn).click(function() {
    $("p").wrapAll("<div></div>");
    $("a").wrapAll( function() {
        return "<div></div>"
    })
})复制代码

结果：

开发者工具显示：

可以看到，wrapAll()方法会移动<p>p元素</p>的位置，强制<p>元素在一个<div>元素里。