Detaillierte Erläuterung der Funktion jQuery.replaceWith()

Die Funktion

replaceWith() wird verwendet, um jedes passende Element durch das angegebene Element zu ersetzen.

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

Syntax

Diese Funktion wurde in jQuery 1.2 hinzugefügt.

jQueryObject.replaceWith( replacement )

Parameter

Parameterbeschreibung

Ersetzung String/Element/jQuery/Function-Typ wird verwendet Alternative Elemente.

Wenn die Parameterersetzung ein String ist, wird er als HTML-String behandelt.

jQuery 1.4 neue Unterstützung: Parameterersetzung kann eine Funktion sein. replaceWith() durchläuft die Funktion und führt sie basierend auf allen übereinstimmenden Elementen aus. Dies zeigt in der Funktion auf das entsprechende DOM-Element.

replaceWith() übergibt außerdem zwei Parameter an die Funktion: Der erste Parameter ist der Index des aktuellen Elements im passenden Element und der zweite Parameter ist der aktuelle interne HTML-Code von der Elementinhalt (innerHTML). Der Rückgabewert der -Funktion ist der zum Ersetzen verwendete Inhalt (kann ein HTML-String, ein DOM-Element oder ein jQuery-Objekt sein).

Rückgabewert

Der Rückgabewert der Funktion „replaceWith()“ ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück (obwohl seine übereinstimmenden Elemente aus dem Dokument entfernt wurden).

Alle Daten und Ereignishandler , die mit dem ersetzten Knoten verknüpft sind, werden ebenfalls entfernt.

Hinweis: Wenn das Ersatzelement ein Element auf der aktuellen Seite ist, verschwindet das Element von seiner ursprünglichen Position. Dies entspricht einem Verschiebevorgang, nicht einem Kopiervorgang.

Beispiel und Beschreibung

Die Funktion „replaceWith()“ wird verwendet, um ein angegebenes Element außerhalb des gesamten Inhalts jedes übereinstimmenden Elements einzuschließen:

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

Bitte beachten Sie, dass „replaceWith()“ und Der Unterschied zwischen den Funktionen „replaceAll()“:

var $A = $("s1");
var $B = $("s2");
// 将$A替换成$B
$A.replaceWith( $B ); // 返回$A
// 将$B替换成$A
$A.replaceAll( $B ); // 返回表示替换内容的jQuery对象( 匹配替换掉$B的所有$A元素 )

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>
<div id="n6"></div>

Der folgende jQuery-Beispielcode wird zur Demonstration von „replaceWith“ verwendet ( ) Die spezifische Verwendung der Funktion:

// 将所有span元素替换为指定的em元素
$("span").replaceWith( &#39;<em class="new">替代元素</em>&#39; );
// 将n6替换为n4
// n4将从原位置上消失
$("#n6").replaceWith( $("#n4") );
// 将所有p元素替换为div元素
$("p").replaceWith( function(i, innerHTML){
    return &#39;<div class="thread-&#39; + (i + 1) + &#39;">&#39; + innerHTML + &#39;</div>&#39;;       
} );

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

<div class="thread-1">
    <em class="new">替代元素</em>    
</div>
<div class="thread-2">   
    <em class="new">替代元素</em>
</div>
<label id="n4">[label#n4]</label>

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