Detaillierte Erläuterung der Funktion jQuery.wrapAll()

Die Funktion wrapAll() wird verwendet, um alle übereinstimmenden Elemente mit einem einzigen Element zu umschließen.

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

Syntax

Diese Funktion wurde in jQuery 1.2 hinzugefügt.

jQueryObject.wrapAll( Wrapper)

Parameter

Parameterbeschreibung

Wrapper String/Element/jQuery/Function-Typ wird verwendet Der Knoten, der das übereinstimmende Element umschließt.

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

Wenn wrapper kein Funktionstyp ist, verschiebt wrapAll() alle passenden Elemente an die Position des ersten passenden Elements und umschließt sie dann alle mit dem angegebenen einzelnen Element.

jQuery 1.4 neue Unterstützung: Parameter-Wrapper kann eine Funktion sein. wrapAll() 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.

wrapAll() ü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 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. „<p><i></i></p>“), führt wrapAll() 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 wrapAll() 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 wrapAll() eine Kopie (Klon) des Elements verwendet, um als Umhüllungselement zu fungieren.

Beispiel und Beschreibung

Die Funktion wrapAll() wird verwendet, um alle übereinstimmenden Elemente mit einem einzigen Element zu umschließen:

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

Nehmen Sie den folgenden HTML-Code als Beispiel:

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

Der folgende jQuery-Beispielcode wird verwendet, um die spezifische Verwendung der Funktion „wrapAll()“ zu demonstrieren:

// 在n4元素外包裹del元素：<del>{#n4}</del>
$("#n4").wrapAll('<del/>');
// 在所有span元素外包裹单个em元素：<em class="all-span">{#n2}{#n5}{#n6}</em>
// 所有span元素会先移动到第一个span元素的位置，然后全部被em元素包裹起来
$("span").wrapAll('<em class="all-span"></em>');
运行代码(其他代码请自行复制到演示页面运行)
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>

Das Folgende ist der jQuery-Beispielcode, bei dem der Parameter-Wrapper a ist Funktion:

<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>
<!--以上是执行jQuery代码前的html内容-->
<script type="text/javascript">
// 在所有span元素外包裹单个em元素：<em class="level-index">{span}</em>
// 由于参数是函数，因此所有span元素不会移动到一起
$("span").wrapAll( function(index){
    return '<em class="level-' + index + '"></em>'; 
} ); 
</script>
<!--以上是执行jQuery代码后的html内容-->
<p id="n1">
    <em class="level-0"><span id="n2">[span#n2]</span></em>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
</p>
<em class="level-1"><span id="n5">[span#n5]</span></em>
<em class="level-2"><span id="n6">[span#n6]</span></em>

Das Folgende ist der jQuery-Beispielcode, bei dem der Wrapper-Parameter ein mehrschichtiges verschachteltes Element ist:

<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( '<div><p><em></em></p></div>' );
/*
如果参数为'<div><p> <em></em></p></div>'，由于'<p>'的第一个子节点是空格(文本节点)，因此停止向内层查找，直接在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>

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