Explication détaillée de l'utilisation de la fonction jQuery.detach()

La fonction detach() est utilisée pour supprimer les éléments correspondants du document.

Vous pouvez également utiliser des sélecteurs pour affiner davantage la portée de la suppression et supprimer uniquement certains des éléments actuellement correspondants qui correspondent au sélecteur spécifié.

Par rapport à remove(), la fonction detach() ne supprimera pas les données supplémentaires (fonction data()) associées à l'élément et au gestionnaire d'événements etc. (remove() sera supprimé ).

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

Syntaxe

jQueryObject.detach( [ selector ] )

Paramètres

Description du paramètre

sélecteur Sélecteur spécifié par le type facultatif/chaîne Chaîne, utilisé pour filtrer éléments correspondant à ce sélecteur.

Si le paramètre selector n'est pas spécifié, tous les éléments de l'élément correspondant actuel sont supprimés.

Valeur de retour

detach()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Exemple et description

La fonction detach() est utilisée pour supprimer les éléments correspondants du document :

<p>段落文本1<span>item1<i>line2<i></span></p>
<p>段落文本2<span>item2<i>line2<i></span></p>
<!--以上是jQuery代码执行前的html内容-->
<script type="text/javascript">
$("span").detach( );
</script>
<!--以下是jQuery代码执行后的html内容-->
<p>段落文本1</p>
<p>段落文本2</p>
以下面这段HTML代码为例：
<p id="n1" class="mark">
    <span id="n2">[span#n2]</span>    
</p>
<p id="n3" class="mark">
    <label id="n4" class="move">[label#n4]</label>
</p>
<p id="n5">
    段落内容
    <span id="n6">[span#n6]<span id="n7">[span#n7]</span></span>    
</p>

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

var $n6 = $("#n6");
// 移除n6元素
$n6.detach( );
var $p = $("p");
// 移除带有类名"mark"的p元素
var $detachedP = $p.detach( ".mark" ); // $detachedP === $
// 将移除了的n6追加到body元素内的起始位置
// 虽然在前面n6已经从文档中被移除
// 但不会将其从jQuery对象中移除，因此我们还可以使用该jQuery对象，将n6再次放入文档中
$n6.prependTo( "body" );

Le code html complet après l'exécution du code ci-dessus est le suivant (le format n'a en aucun cas été ajusté) :

<span id="n6">[span#n6]<span id="n7">[span#n7]</span></span>
<p id="n5">
    段落内容        
</p>

La fonction detach() supprimera les éléments correspondants de l'élément document, mais elle ne supprimera pas l'élément correspondant de l'objet jQuery, et detach() conservera les données supplémentaires et les événements liés associés à l'élément.

Veuillez vous référer au code HTML suivant :

<p id="n1">
    <input id="n2" type="button" value="按钮1" />
    <input id="n3" type="button" value="按钮2" /> 
</p>

Ensuite, nous enregistrons les événements de clic pour tous les boutons, puis supprimons l'élément n3, puis ajoutons le n3 supprimé à n1 Position finale interne :

var $n3 = $("#n3");
$n3.data("myX", "附加数据");
document.writeln( $n3.data("myX") ); // 附加数据
$n3.trigger("click"); // 弹出提示框信息：按钮2
// 移除元素n3
$n3.detach();
// 移除之后，仍然可以获取附加数据并触发点击事件
// document.writeln( $n3.data("myX") ); // 附加数据
// $n3.trigger("click"); // 弹出提示框信息：按钮2
// 将n3重新追加到n1内部的末尾
$n3.appendTo("#n1");
// 此时，n3的附加数据和绑定的点击事件仍然存在
document.writeln( $n3.data("myX") ); // 附加数据
$n3.trigger("click"); // 弹出提示框信息：按钮2

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!