Explication détaillée de la fonction jQuery.replaceWith()

La fonction

replaceWith() est utilisée pour remplacer chaque élément correspondant par l'élément spécifié.

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

Cette fonction est ajoutée dans jQuery 1.2.

jQueryObject.replaceWith( remplacement)

Paramètre

Description du paramètre

remplacement String/Element/jQuery/Le type de fonction est utilisé Éléments alternatifs.

Si le paramètre de remplacement est string, il sera traité comme une chaîne html.

Nouveau support de jQuery 1.4 : le remplacement des paramètres peut être une fonction. replaceWith() parcourra et exécutera cette fonction en fonction de tous les éléments correspondants, et cela dans la fonction pointera vers l'élément DOM correspondant.

replaceWith() transmettra également deux paramètres à la fonction : le premier paramètre est l' index de l'élément actuel dans l'élément correspondant, et le deuxième paramètre est le html interne actuel de le contenu de l'élément (innerHTML). La valeur de retour de la fonction est le contenu utilisé pour le remplacement (peut être une chaîne HTML, un élément DOM ou un objet jQuery).

Valeur de retour

La valeur de retour de la fonction replaceWith() est de type jQuery, renvoyant l'objet jQuery actuel lui-même (bien que ses éléments correspondants aient été supprimés du document).

Toutes les données et gestionnaires d'événements associés au nœud remplacé seront également supprimés.

Remarque : Si l'élément de remplacement est un élément de la page actuelle, l'élément disparaîtra de sa position d'origine. Cela équivaut à une opération de déplacement et non à une opération de copie.

Exemple et description

La fonction replaceWith() est utilisée pour envelopper un élément spécifié en dehors de tout le contenu de chaque élément correspondant :

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

Veuillez noter que replaceWith() et La différence entre les fonctions replaceAll() :

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

Veuillez vous référer au code HTML suivant (code HTML d'origine) :

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

L'exemple de code jQuery suivant est utilisé pour démontrer replaceWith ( ) L'utilisation spécifique de la fonction :

// 将所有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;;       
} );

Ce qui suit est le contenu html après l'exécution du code jQuery (le format n'a en aucun cas été ajusté) :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!