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

La fonction

wrapInner() est utilisée pour envelopper la structure HTML spécifiée en dehors de tous les nœuds enfants de chaque élément correspondant.

Tous les sous-nœuds ici incluent des nœuds de texte, des nœuds de commentaires et d'autres types de nœuds.

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

Syntaxe

Cette fonction est ajoutée dans jQuery 1.2.

jQueryObject.wrapInner( wrapper )

Paramètre

Description du paramètre

nœud de type wrapper String/Element/jQuery/Function utilisé pour envelopper les éléments correspondants.

Si le wrapper de paramètre est une chaîne, il sera considéré comme un sélecteur jQuery ou une chaîne HTML, et jQuery fera son propre jugement.

Nouveau support de jQuery 1.4 : le wrapper de paramètres peut être une fonction. wrapInner() 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.

wrapInner() transmet également un paramètre à la fonction, qui est l' index de l'élément actuel dans l'élément correspondant. La valeur de retour de la fonction est le contenu du nœud utilisé pour l'encapsulation (peut être une chaîne HTML, un sélecteur, un élément DOM ou un objet jQuery).

Remarque : Si le wrapper correspond à plusieurs éléments, seul le premier élément sera utilisé comme élément d'emballage.

Remarque : Si le wrapper est un élément imbriqué à plusieurs niveaux (tel que "e388a4556c0f65e1904146cc1a846bee5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3"), wrapInner() vérifiera de l'extérieur à l'intérieur Le premier nœud de chaque niveau d'imbrication. Si le nœud n'a pas de nœud enfant ou si le premier nœud enfant n'est pas un nœud élément (comme un nœud de texte, un nœud de commentaire, etc.), arrêtez de chercher vers l'intérieur et ajoutez directement (append()) l'élément correspondant actuel à la position finale à l'intérieur. le nœud actuel.

Valeur de retour

La valeur de retour de la fonction wrapInner() est de type jQuery, renvoyant l'objet jQuery actuel lui-même (pour faciliter la programmation en chaîne).

Remarque : Même si l'élément wrapper est un élément de la page actuelle, l'élément ne disparaîtra pas de sa position d'origine. Parce que wrapInner() utilise une copie (clone) de l'élément pour agir comme un wrapper.

Exemple et description

La fonction wrapInner() est utilisée pour envelopper l'é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").wrapInner( &#39;<em></em>&#39; ); 
</script>
<!--以下是jQuery代码执行后的html内容-->
<p><em>段落文本1<span></span></em></p>
<p><em>段落文本2<span></span></em></p>

Veuillez vous référer au code HTML suivant (code HTML original) :

<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() insérera la balise de début et la balise de fin de l'élément d'habillage après la balise de début et avant la balise de fin de chaque élément e388a4556c0f65e1904146cc1a846bee tous les caractères d'espacement. Voici le contenu HTML après l'exécution du code jQuery ci-dessus (le format n'a pas été ajusté) :

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

Ensuite, en prenant le code HTML original comme exemple, nous définissons le wrapper de paramètres sur une fonction personnalisée , code jQuery Comme suit :

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

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

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

Prenant également le HTML original code à titre d'exemple, voici le wrapper de paramètres : code jQuery pour les éléments imbriqués multicouches :

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

Ce qui suit est le contenu html après avoir exécuté le code jQuery ci-dessus :

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

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!