DOM包裹wrap()方法

如果要將元素用其他元素包裹起來，也就是給它增加一個(gè)父元素，針對這樣的處理，JQuery提供了一個(gè)wrap方法

.wrap( wrappingElement )：在集合中匹配的每個(gè)元素周圍包裹一個(gè)HTML結(jié)構(gòu)

簡單的看一段代碼：

<p>p元素</p>

給p元素增加一個(gè)div包裹

$('p').wrap('<div></div>')

最后的結(jié)構(gòu)，p元素增加了一個(gè)父div的結(jié)構(gòu)

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

.wrap( function )?：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對象

使用后的效果與直接傳遞參數(shù)是一樣，只不過可以把代碼寫在函數(shù)體內(nèi)部，寫法不同而已

以第一個(gè)案例為例：

$('p').wrap(function() {return '<div></div>'; //與第一種類似，只是寫法不一樣 })

注意：

.wrap()函數(shù)可以接受任何字符串或?qū)ο?#xff0c;可以傳遞給$()工廠函數(shù)來指定一個(gè)DOM結(jié)構(gòu)。這種結(jié)構(gòu)可以嵌套了好幾層深，但應(yīng)該只包含一個(gè)核心的元素。每個(gè)匹配的元素都會被這種結(jié)構(gòu)包裹。該方法返回原始的元素集，以便之后使用鏈?zhǔn)椒椒?/span>

?

DOM包裹unwrap()方法

我們可以通過wrap方法給選中元素增加一個(gè)包裹的父元素。相反，如果刪除選中元素的父元素要如何處理 ?

jQuery提供了一個(gè)unwrap()方法 ，作用與wrap方法是相反的。將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。

看一段簡單案例：

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

我要?jiǎng)h除這段代碼中的div，一般常規(guī)的方法會直接通過remove或者empty方法

$('div').remove();

但是如果我還要保留內(nèi)部元素p，這樣就意味著需要多做很多處理，步驟相對要麻煩很多，為了更便捷，jQuery提供了unwrap方法很方便的處理了這個(gè)問題

$('p').unwrap();

找到p元素，然后調(diào)用unwrap方法，這樣只會刪除父輩div元素了

結(jié)果：

<p>p元素</p>

這個(gè)方法比較簡單，也不接受任何參數(shù)，注意參考下案例的使用即可

?

DOM包裹wrapAll()方法

wrap是針對單個(gè)dom元素處理，如果要將集合中的元素用其他元素包裹起來，也就是給他們增加一個(gè)父元素，針對這樣的處理，JQuery提供了一個(gè)wrapAll方法

.wrapAll( wrappingElement )：給集合中匹配的元素增加一個(gè)外面包裹HTML結(jié)構(gòu)

簡單的看一段代碼：

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

給所有p元素增加一個(gè)div包裹

$('p').wrapAll('<div></div>')

最后的結(jié)構(gòu)，2個(gè)P元素都增加了一個(gè)父div的結(jié)構(gòu)

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

.wrapAll( function )?：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對象

通過回調(diào)的方式可以單獨(dú)處理每一個(gè)元素

以上面案例為例，

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

以上的寫法的結(jié)果如下，等同于warp的處理了

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

注意：

.wrapAll()函數(shù)可以接受任何字符串或?qū)ο?#xff0c;可以傳遞給$()工廠函數(shù)來指定一個(gè)DOM結(jié)構(gòu)。這種結(jié)構(gòu)可以嵌套多層，但是最內(nèi)層只能有一個(gè)元素。所有匹配元素將會被當(dāng)作是一個(gè)整體，在這個(gè)整體的外部用指定的 HTML 結(jié)構(gòu)進(jìn)行包裹。

?

DOM包裹wrapInner()方法

如果要將合集中的元素內(nèi)部所有的子元素用其他元素包裹起來，并當(dāng)作指定元素的子元素，針對這樣的處理，JQuery提供了一個(gè)wrapInner方法

.wrapInner( wrappingElement )：給集合中匹配的元素的內(nèi)部，增加包裹的HTML結(jié)構(gòu)

聽起來有點(diǎn)繞，可以用個(gè)簡單的例子描述下，簡單的看一段代碼：

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

給所有元素增加一個(gè)p包裹

$('div').wrapInner('<p></p>')

最后的結(jié)構(gòu)，匹配的di元素的內(nèi)部元素被p給包裹了

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

.wrapInner( function )?：允許我們用一個(gè)callback函數(shù)做參數(shù)，每次遇到匹配元素時(shí)，該函數(shù)被執(zhí)行，返回一個(gè)DOM元素，jQuery對象，或者HTML片段，用來包住匹配元素的內(nèi)容

以上面案例為例，

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

以上的寫法的結(jié)果如下，等同于第一種處理了

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

注意：

當(dāng)通過一個(gè)選擇器字符串傳遞給.wrapInner() 函數(shù)，其參數(shù)應(yīng)該是格式正確的 HTML，并且 HTML 標(biāo)簽應(yīng)該是被正確關(guān)閉的。

轉(zhuǎn)載于:https://www.cnblogs.com/liaolijun/p/7326251.html

總結(jié)

以上是生活随笔為你收集整理的DOM包裹wrap()方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。