Detailed explanation of jQuery.wrap() function

The wrap() function is used to wrap the specified HTML structure outside each matching element.

The opposite of this function is the unwrap() function, which is used for the parent element of the currently matched element (only the parent element is removed, and all its internal nodes are retained).

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.wrap( wrapper )

Parameters

Parameter Description

wrapper ## The #String/Element/jQuery/Function type is used to wrap nodes that match elements.

If the parameter wrapper is a

string, it will be regarded as a jQuery selector or html string, and jQuery will make its own judgment.

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

wrap() also passes 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 the wrapper is a multi-layer nested element (such as e388a4556c0f65e1904146cc1a846bee5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3), wrap() will check each layer from the outside in. The first node of the nest. 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()) the current matching element at the end position inside the current node.

Return value

The return value of the wrap() function is of jQuery type, returning 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

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

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<script type="text/javascript">
$("p").wrap( &#39;<div></div>&#39; ); 
</script>
<!--以下是jQuery代码执行后的html内容-->
<div><p>段落文本1<span></span></p></div>
<div><p>段落文本2<span></span></p></div>

Take the following HTML code as an example:

<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>

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

// 在n2元素外包裹strong元素：<strong>{#n2}</strong>
$("#n2").wrap(&#39;<strong/>&#39;);// 在n4元素外包裹form元素：<form name="myForm">{#n4}</form>
$("#n4").wrap(&#39;<form name="myForm"></form>&#39;);
// 在每个p元素外包裹div元素：<div data_id="index">{p}</div>
$("p").wrap( function(index){
    return &#39;<div data_id="&#39; + index + &#39;"></div>&#39;;   
} );
// 在n5元素外包裹嵌套的div元素：<div><p><em><b>{#n5}</b></em></p></div>
$("#n5").wrap( &#39;<div><p><em><b></b></em></p></div>&#39; );
// 在n6元素外包裹嵌套的div元素：<div><p> <em><b></b></em>${#n5}</p></div>
// wrap()会从外层div依次往内部查找，以确定n5元素的所在位置
// wrap()将从外往内检查每层嵌套的第一个元素，如果该元素没有子元素或者第一个子元素不是Element节点，就停止向内查找
// 由于参数的&#39;<p>&#39;后面有空格(文本节点)，也就是说p元素的第一个子元素不是Element类型，因此直接将n6插入到p元素内部的末尾位置
$("#n6").wrap( &#39;<div><p> <em><b></b></em></p></div>&#39; );
wrap()会将包裹元素的开始标记和结束标记分别置于匹配元素的两侧，不会额外添加任何空白字符，上述代码执行后的完整html代码如下(格式未作任何调整)：
<div data_id="0"><p id="n1">
    <strong><span id="n2">span#n2</span></strong>    
</p></div>
<div data_id="1"><p id="n3">
    <form name="myForm"><input id="n4" type="text"></form>
</p></div>
<div><p><em><b><span id="n5">多层嵌套1</span></b></em></p></div>
<div><p> <em><b></b></em><span id="n6">多层嵌套2</span></p></div>

The above is the detailed content of Detailed explanation of jQuery.wrap() function. For more information, please follow other related articles on the PHP Chinese website!