Detailed explanation of jQuery.wrapAll() function

wrapAll() function is used to wrap all matching elements with a single element.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.2 Added this function.

jQueryObject.wrapAll( wrapper )

Parameters

Parameter Description

wrapper String/Element/jQuery/Function type is used The node that wraps the matching element.

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.

If wrapper is not a function type, wrapAll() will move all matching elements to the position of the first matching element, and then wrap them all with the specified single element.

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

wrapAll() 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 the wrapper is a multi-level nested element (such as "e388a4556c0f65e1904146cc1a846bee5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3"), wrapAll() will check from outside to inside. The first node of each level of nesting. 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 wrapAll() 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 wrapAll() uses a copy (clone) of the element to act as the wrapping element.

Example & Description

The wrapAll() function is used to wrap all matching elements with a single element:

<p>段落文本1<span></span></p>
<p>段落文本2<span></span></p>
<script type="text/javascript">
$("p").wrapAll( &#39;<div></div>&#39; ); 
</script>
<!--以下是jQuery代码执行后的html内容-->
<div><p>段落文本1<span></span></p><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">
    <label id="n4">[label#n4]</label>
</p>
<span id="n5">[span#n5]</span>
<span id="n6">[span#n6]</span>

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

// 在n4元素外包裹del元素：<del>{#n4}</del>
$("#n4").wrapAll(&#39;<del/>&#39;);
// 在所有span元素外包裹单个em元素：<em class="all-span">{#n2}{#n5}{#n6}</em>
// 所有span元素会先移动到第一个span元素的位置，然后全部被em元素包裹起来
$("span").wrapAll(&#39;<em class="all-span"></em>&#39;);
运行代码(其他代码请自行复制到演示页面运行)
wrapAll()会将包裹元素的开始标记和结束标记分别置于所有匹配元素的两侧，不会额外添加任何空白字符，上述代码执行后的完整html代码如下(格式未作任何调整)：
<p id="n1">
    <em class="all-span"><span id="n2">[span#n2]</span><span id="n5">[span#n5]</span><span id="n6">[span#n6]</span></em>    
</p>
<p id="n3">
    <del><label id="n4">[label#n4]</label></del>
</p>

The following is the jQuery sample code where the parameter wrapper is a function:

<p id="n1">
    <span id="n2">[span#n2]</span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
</p>
<span id="n5">[span#n5]</span>
<span id="n6">[span#n6]</span>




    [span#n2]    


    [label#n4]

[span#n5]
[span#n6]

The following is the wrapper parameter jQuery sample code for multiple levels of nested elements:

<span id="n1">[span#n1]</span>
<label id="n2">[label#n2]</label>
<span id="n3">[span#n3]</span>
<!--以上是执行jQuery代码前的html内容-->
<script type="text/javascript">
// 在所有span元素外包裹嵌套的div元素：<div><p><em>{#n1}{#n3}</em></p></div>
// 所有span元素都会移动到第一个span元素的位置
$("span").wrapAll( &#39;<div><p><em></em></p></div>&#39; );
/*
如果参数为&#39;<div><p> <em></em></p></div>&#39;，由于&#39;<p>&#39;的第一个子节点是空格(文本节点)，因此停止向内层查找，直接在p元素内部的末尾位置插入所有的span元素：<div><p> <em></em>{#n1}{#n3}</p></div>
 */
</script>
<!--以上是执行jQuery代码后的html内容-->
<div><p><em><span id="n1">[span#n1]</span><span id="n3">[span#n3]</span></em></p></div>
<label id="n2">[label#n2]</label>

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