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>元素裏。