jquery之wrap(),wrap(),unwrap()方法詳解

來源：懂視網責編：小采時間：2020-11-27 20:18:53

jquery之wrap(),wrap(),unwrap()方法詳解

jquery之wrap(),wrap(),unwrap()方法詳解:wrap()：為每個匹配元素外面添加指定的HTML結構，wrapAll(): 為所有匹配元素（作為一個整體）外面添加一個指定的HTML結構wrap()函數用于在每個匹配元素外部包裹指定的HTML結構。與該函數相對的是unwrap()函數，用于當前匹配元素的父元素(只移除父元素，其內

推薦度：

點擊下載本文 文檔為doc格式

導讀jquery之wrap(),wrap(),unwrap()方法詳解:wrap()：為每個匹配元素外面添加指定的HTML結構，wrapAll(): 為所有匹配元素（作為一個整體）外面添加一個指定的HTML結構wrap()函數用于在每個匹配元素外部包裹指定的HTML結構。與該函數相對的是unwrap()函數，用于當前匹配元素的父元素(只移除父元素，其內

wrap()：為每個匹配元素外面添加指定的HTML結構，

wrapAll(): 為所有匹配元素（作為一個整體）外面添加一個指定的HTML結構wrap()函數用于在每個匹配元素外部包裹指定的HTML結構。

與該函數相對的是unwrap()函數，用于當前匹配元素的父元素(只移除父元素，其內部節點全部保留)。

該函數屬于jQuery對象(實例)。

語法

jQueryObject.wrap( wrapper )

參數

參數	描述
wrapper	String/Element/jQuery/Function類型用于包裹匹配元素的節點。

如果參數wrapper為字符串，則將其視作jQuery選擇器或html字符串，jQuery會自行判斷。

jQuery 1.4 新增支持：參數wrapper可以為函數。wrap()將根據匹配的所有元素遍歷執行該函數，函數中的this將指向對應的DOM元素。

wrap()還會為函數傳入一個參數，即當前元素在匹配元素中的索引。函數的返回值就是用于包裹的節點內容(可以是html字符串、DOM元素或jQuery對象)。

注意：如果wrapper匹配多個元素，則只將第一個元素作為包裹元素。

注意：如果wrapper是多層嵌套的元素(例如)，wrap()將從外往內檢查每層嵌套的第一個節點。如果該節點沒有子節點或者第一個子節點不是Element節點(比如文本節點、注釋節點等)，就停止向內查找，直接在當前節點內部的末尾位置追加(append())當前匹配元素。

返回值

wrap()函數的返回值為jQuery類型，返回當前jQuery對象本身(以便于進行鏈式風格的編程)。

注意：即使wrapper元素是當前頁面中的元素，該元素也不會從原位置上消失。因為wrap()使用的是該元素的副本(克隆)來充當包裹。

示例&說明

wrap()函數用于在每個匹配元素之前的位置插入內容：

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p><script type="text/javascript">
$("p").wrap( '<p></p>' ); 
</script>
<!--以下是jQuery代碼執行后的html內容-->
<p><p>段落文本1<span></span></p></p>
<p><p>段落文本2<span></span></p></p>

以下面這段HTML代碼為例：

<p id="n1">
 <span id="n2">span#n2</span> 
</p>
<p id="n3">
 <input id="n4" type="text" />
</p>
<span id="n5">多層嵌套1</span>
<span id="n6">多層嵌套2</span>

以下jQuery示例代碼用于演示wrap()函數的具體用法：

// 在n2元素外包裹strong元素：<strong>{#n2}</strong>
$("#n2").wrap('<strong/>');
// 在n4元素外包裹form元素：<form name="myForm">{#n4}</form>
$("#n4").wrap('<form name="myForm"></form>');

// 在每個p元素外包裹p元素：<p data_id="index">{p}</p>
$("p").wrap( function(index){
 return '<p data_id="' + index + '"></p>'; 
} );

// 在n5元素外包裹嵌套的p元素：<p><p><em><b>{#n5}</b></em></p></p>
$("#n5").wrap( '<p><p><em><b></b></em></p></p>' );

// 在n6元素外包裹嵌套的p元素：<p><p> <em><b></b></em>${#n5}</p></p>
// wrap()會從外層p依次往內部查找，以確定n5元素的所在位置
// wrap()將從外往內檢查每層嵌套的第一個元素，如果該元素沒有子元素或者第一個子元素不是Element節點，就停止向內查找
// 由于參數的'<p>'后面有空格(文本節點)，也就是說p元素的第一個子元素不是Element類型，因此直接將n6插入到p元素內部的末尾位置
$("#n6").wrap( '<p><p> <em><b></b></em></p></p>' );

運行代碼

wrap()會將包裹元素的開始標記和結束標記分別置于匹配元素的兩側，不會額外添加任何空白字符，上述代碼執行后的完整html代碼如下(格式未作任何調整)：

<p data_id="0"><p id="n1">
 <strong><span id="n2">span#n2</span></strong> 
</p></p>
<p data_id="1"><p id="n3">
 <form name="myForm"><input id="n4" type="text"></form>
</p></p>
<p><p><em><b><span id="n5">多層嵌套1</span></b></em></p></p>
<p><p> <em><b></b></em><span id="n6">多層嵌套2</span></p></p>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com