Detailed explanation of jQuery.wrapInner() function usage

The wrapInner() function is used to wrap the specified HTML structure outside all child nodes of each matching element.

All sub-nodes here include text nodes, comment nodes and other types of nodes.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.2 Added this function.

jQueryObject.wrapInner( wrapper )

Parameters

Parameter Description

wrapper String/Element/jQuery/Function type node used to wrap matching 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. wrapInner() will traverse and execute this function based on all matching elements, and this in the function will point to the corresponding DOM element.

wrapInner() 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, selector, 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 "

"), wrapInner() 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 wrapInner() 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 wrapInner() uses a copy (clone) of the element to act as a wrapper.

Example & Description

wrapInner() function is used to wrap the specified element outside all the content of each matching element:

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

Please refer to the following HTML code ( Original HTML code):

<p id="n1">
    <span id="n2">foo</span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
    <span id="n5">bar</span>
</p>
接着，我们为每个<p>元素的所有子节点外部包裹<strong>元素
// 为每个p元素的所有子节点外部包裹strong元素
$("p").wrapInner( &#39;<strong />&#39; );

wrapperInner() will insert the start tag and end tag of the wrapping element after the start tag and before the end tag of each

element, without adding any additional whitespace characters. . The following is the html content after executing the above jQuery code (the format has not been adjusted):

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

Next, taking the original HTML code as an example, we set the parameter wrapper to a custom function, and the jQuery code is as follows:

// 为每个span元素的所有子节点外部包裹em元素，em元素的class属性等于span元素的文本内容
$("span").wrapInner( function(i){
    return &#39;<em class="&#39; + $(this).text() + &#39;"></em>&#39;;      
} );

The following is the html content after the jQuery code is executed (the format has not been adjusted):

<p id="n1">
    <span id="n2"><em class="foo">foo</em></span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
    <span id="n5"><em class="bar">bar</em></span>
</p>

Also taking the original HTML code as an example, the following is the parameter wrapper for multi-layer nested elements jQuery code:

// 为每个span元素的所有子节点外部包裹em元素：<em><b><i>{span.childNodes}</i></b></em>
$("span").wrapInner( &#39;<em><b><i></i></b></em>&#39; );
/*
如果参数为&#39;<em><b> <i></i></b></em>&#39;，由于&#39;<b>&#39;的第一个子节点是空格(文本节点)，因此停止向内层查找，直接在b元素内部的末尾位置插入所有的span元素：<em><b> <i></i>{span.childNodes}</b></em>
 */

The following is the html content after running the above jQuery code:

<p id="n1">
    <span id="n2"><em><b><i>foo</i></b></em></span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
    <span id="n5"><em><b><i>bar</i></b></em></span>
</p>

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