Detailed explanation of jquery's wrap(), wrap(), and unwrap() methods

wrap(): Add the specified HTML structure outside each matching element,

wrapAll(): Add a specified HTML structure outside all matching elements (as a whole) wrap( ) Function is used to wrap the specified HTML structure outside each matching element.

Relative to this function is the unwrap() function, which is used for the parent element of the current matching element (only the parent element is removed, and all its internal nodes are retained).

This function belongs to the <a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery</a> object (instance).

Syntax

jQueryObject.wrap( wrapper )

Parameters

Parameters	Description
The wrapper	String/Element/jQuery/Function type is used to wrap nodes of matching elements.

If the parameter wrapper is a string, it is treated as a jQuery selector or html string, jQuery will judge it by itself.

jQuery 1.4 New support: Parameter wrapper can be a function. wrap() will traverse and execute this function based on all matching elements, and this in the function will point to the corresponding DOM element.

wrap() will also pass in a parameter to the function, which is the index of the current element in the matching element. The return value of the function is the node content used for wrapping (can be an html string, DOM element or jQuery object).

Note: If wrapper matches multiple elements, only the first element will be used as the wrapping element.

Note: If wrapper is a multi-level nested element (for example), wrap() will check each level of nesting from outside to inside first node. If the node has no child nodes or the first child node is not an Element node (such as text node, comment node, etc.), stop searching inward and directly append (append()) at the end of the current node. ) currently matches the element.

Return value

wrap()The return value of the function is jQuery type, returns the current jQuery object itself (to facilitate chain-style programming).

Note: Even if the wrapper element is an element in the current page, the element will not disappear from its original position. Because wrap() uses a copy (clone) of the element to act as a wrapper.

Example & Description

wrap()The function is used to insert content before each matching element :

<span class="tag"><p><span class="pln">段落文本1<span class="tag"><span></span></p><span class="pln"><br/><span class="tag"><p><span class="pln">段落文本2<span class="tag"><span></span></p><span class="pln"><br/><br/><span class="tag"><script<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text/<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>"<span class="tag">><span class="pln"><br/>$<span class="pun">(<span class="str">"p"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">&#39;<p></p>&#39;<span class="pln"> <span class="pun">);<span class="pln"> <br/><span class="tag"></script><span class="pln"><br/><br/><span class="com"><!--以下是jQuery代码执行后的html内容--><span class="pln"><br/><span class="tag"><p><p><span class="pln">段落文本1<span class="tag"><span></span></p></p><span class="pln"><br/><span class="tag"><p><p><span class="pln">段落文本2<span class="tag"><span></span></p></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Take the following HTML code as an example:

<span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span><span class="pln">    <br/><span class="tag"></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text"<span class="pln"> <span class="tag">/><span class="pln"><br/><span class="tag"></p><span class="pln"><br/><span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">多层嵌套1<span class="tag"></span><span class="pln"><br/><span class="tag"><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">多层嵌套2<span class="tag"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

The following jQuery sample code is used to demonstrate the specific usage of the wrap() function:

<span class="com">// 在n2元素外包裹strong元素：<strong>{#n2}</strong><span class="pln"><br/>$<span class="pun">(<span class="str">"#n2"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="str">&#39;<strong/>&#39;<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n4元素外包裹form元素：<form name="myForm">{#n4}</form><span class="pln"><br/>$<span class="pun">(<span class="str">"#n4"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="str">&#39;<form name="myForm"></form>&#39;<span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在每个p元素外包裹p元素：<p data_id="index">{p}</p><span class="pln"><br/>$<span class="pun">(<span class="str">"p"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="kwd">function<span class="pun">(<span class="pln">index<span class="pun">){<span class="pln"><br/>    <span class="kwd"><a href="http://www.php.cn/wiki/135.html" target="_blank">return</a><span class="pln"> <span class="str">&#39;<p data_id="&#39;<span class="pln"> <span class="pun">+<span class="pln"> index <span class="pun">+<span class="pln"> <span class="str">&#39;"></p>&#39;<span class="pun">;<span class="pln">   <br/><span class="pun">}<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n5元素外包裹嵌套的p元素：<p><p><em><b>{#n5}</b></em></p></p><span class="pln"><br/>$<span class="pun">(<span class="str">"#n5"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">&#39;<p><p><em><b></b></em></p></p>&#39;<span class="pln"> <span class="pun">);<span class="pln"><br/><br/><br/><span class="com">// 在n6元素外包裹嵌套的p元素：<p><p> <em><b></b></em>${#n5}</p></p><span class="pln"><br/><span class="com">// wrap()会从外层p依次往内部查找，以确定n5元素的所在位置<span class="pln"><br/><span class="com">// wrap()将从外往内检查每层嵌套的第一个元素，如果该元素没有子元素或者第一个子元素不是Element节点，就停止向内查找<span class="pln"><br/><span class="com">// 由于参数的&#39;<p>&#39;后面有空格(文本节点)，也就是说p元素的第一个子元素不是Element类型，因此直接将n6插入到p元素内部的末尾位置<span class="pln"><br/>$<span class="pun">(<span class="str">"#n6"<span class="pun">).<span class="pln">wrap<span class="pun">(<span class="pln"> <span class="str">&#39;<p><p> <em><b></b></em></p></p>&#39;<span class="pln"> <span class="pun">);</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Run the code

wrap() will place the start tag and end tag of the wrapped element on both sides of the matching element, will not add any additional whitespace characters , the complete html code after the above code is executed is as follows (the format has not been adjusted in any way):

<span class="tag"><p<span class="pln"> <span class="atn">data_id<span class="pun">=<span class="atv">"0"<span class="tag">><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n1"<span class="tag">><span class="pln"><br/>    <span class="tag"><strong><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n2"<span class="tag">><span class="pln">span#n2<span class="tag"></span></strong><span class="pln">    <br/><span class="tag"></p></p><span class="pln"><br/><span class="tag"><p<span class="pln"> <span class="atn">data_id<span class="pun">=<span class="atv">"1"<span class="tag">><p<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n3"<span class="tag">><span class="pln"><br/>    <span class="tag"><form<span class="pln"> <span class="atn">name<span class="pun">=<span class="atv">"myForm"<span class="tag">><input<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n4"<span class="pln"> <span class="atn">type<span class="pun">=<span class="atv">"text"<span class="tag">></form><span class="pln"><br/><span class="tag"></p></p><span class="pln"><br/><span class="tag"><p><p><em><b><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n5"<span class="tag">><span class="pln">多层嵌套1<span class="tag"></span></b></em></p></p><span class="pln"><br/><span class="tag"><p><p><span class="pln"> <span class="tag"><em><b></b></em><span<span class="pln"> <span class="atn">id<span class="pun">=<span class="atv">"n6"<span class="tag">><span class="pln">多层嵌套2<span class="tag"></span></p></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

The above is the detailed content of Detailed explanation of jquery's wrap(), wrap(), and unwrap() methods. For more information, please follow other related articles on the PHP Chinese website!