Detaillierte Erläuterung der Verwendung der jQuery.wrapInner()-Funktion

Die Funktion

wrapInner() wird verwendet, um die angegebene HTML-Struktur außerhalb aller untergeordneten Knoten jedes übereinstimmenden Elements zu umschließen.

Alle Unterknoten hier umfassen Textknoten, Kommentarknoten und andere Arten von Knoten.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

Diese Funktion wurde in jQuery 1.2 hinzugefügt.

jQueryObject.wrapInner( Wrapper)

Parameter

Parameterbeschreibung

Wrapper Knoten vom Typ String/Element/jQuery/Funktion, der zum Umschließen übereinstimmender Elemente verwendet wird.

Wenn der Parameter-Wrapper ein String ist, wird er als jQuery-Selektor oder HTML-String betrachtet und jQuery trifft sein eigenes Urteil.

jQuery 1.4 neue Unterstützung: Parameter-Wrapper kann eine Funktion sein. wrapInner() durchläuft diese Funktion und führt sie basierend auf allen übereinstimmenden Elementen aus, und diese in der Funktion zeigt auf das entsprechende DOM-Element.

wrapInner() übergibt außerdem einen Parameter an die Funktion, nämlich den Index des aktuellen Elements im passenden Element. Der Rückgabewert der -Funktion ist der zum Umschließen verwendete Knoteninhalt (kann ein HTML-String, ein Selektor, ein DOM-Element oder ein jQuery-Objekt sein).

Hinweis: Wenn der Wrapper mit mehreren Elementen übereinstimmt, wird nur das erste Element als Wrapper-Element verwendet.

Hinweis: Wenn der Wrapper ein mehrstufiges verschachteltes Element ist (z. B. „e388a4556c0f65e1904146cc1a846bee5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3“), führt wrapInner() eine Prüfung von außen durch nach innen Der erste Knoten jeder Verschachtelungsebene. Wenn der Knoten keine untergeordneten Knoten hat oder der erste untergeordnete Knoten kein Elementknoten ist (z. B. ein Textknoten, ein Kommentarknoten usw.), beenden Sie die Suche nach innen und hängen Sie das aktuell passende Element direkt an der Endposition im Inneren an (append()). der aktuelle Knoten.

Rückgabewert

Der Rückgabewert der Funktion wrapInner() ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück (um die Programmierung im Kettenstil zu erleichtern).

Hinweis: Auch wenn das Wrapper-Element ein Element auf der aktuellen Seite ist, verschwindet das Element nicht von seiner ursprünglichen Position. Weil wrapInner() eine Kopie (Klon) des Elements verwendet, um als Wrapper zu fungieren.

Beispiel und Beschreibung

Die Funktion „wrapInner()“ wird verwendet, um das angegebene Element außerhalb des gesamten Inhalts jedes übereinstimmenden Elements zu verpacken:

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

Bitte beachten Sie den folgenden HTML-Code (ursprünglicher 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() fügt das Start-Tag und das End-Tag des Wrapper-Elements nach dem Start-Tag und vor dem End-Tag jedes e388a4556c0f65e1904146cc1a846bee-Elements ein, ohne zusätzliches Hinzufügen alle Leerzeichen. Das Folgende ist der HTML-Inhalt nach der Ausführung des obigen jQuery-Codes (das Format wurde nicht angepasst):

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

Als nächstes legen wir am Beispiel des ursprünglichen HTML-Codes den Parameter-Wrapper auf eine benutzerdefinierte Funktion fest , jQuery-Code Wie folgt:

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

Das Folgende ist der HTML-Inhalt nach der Ausführung des jQuery-Codes (das Format wurde nicht angepasst):

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

Es wird auch der ursprüngliche HTML-Code verwendet Code als Beispiel, das Folgende ist der Parameter-Wrapper: jQuery-Code für mehrschichtige verschachtelte Elemente:

// 为每个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>
 */

Das Folgende ist der HTML-Inhalt nach der Ausführung des obigen jQuery-Codes:

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der jQuery.wrapInner()-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!