jQuery方法wrapAll()

lakey0126發表於2018-08-04
jQuery

在慕課網學習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的原意就是“包裹所有”，用它實現每個匹配元素的單獨的包裹顯得有點古怪了。

順便總結一下

jQuery方法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方法wrapAll()

在開發者工具下是這樣顯示：

jQuery方法wrapAll()

而在jQuery 3.0以上版本，兩個a元素會被以一個新的<div>元素包裹。

jQuery方法wrapAll()

在開發者工具下是這樣顯示：

jQuery方法wrapAll()

很顯然，這才是我們要的結果。


如果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>"
    })
})複製程式碼

結果：

jQuery方法wrapAll()

開發者工具顯示：

jQuery方法wrapAll()

可以看到，wrapAll()方法會移動<p>p元素</p>的位置，強制<p>元素在一個<div>元素裡。


相關文章