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

La fonction wrapAll() est utilisée pour envelopper tous les éléments correspondants avec un seul élément.

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

Syntaxe

Cette fonction est ajoutée dans jQuery 1.2.

jQueryObject.wrapAll( wrapper )

Paramètre

Description du paramètre

wrapper String/Element/jQuery/Le type de fonction est utilisé Le nœud qui enveloppe l'élément correspondant.

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.

Si wrapper n'est pas un type de fonction, wrapAll() déplacera tous les éléments correspondants vers la position du premier élément correspondant, puis les enveloppera tous avec l'élément unique spécifié.

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

wrapAll() 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 é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"), wrapAll() 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 wrapAll() 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 wrapAll() utilise une copie (clone) de l'élément pour agir comme élément d'emballage.

Exemple et description

La fonction wrapAll() est utilisée pour envelopper tous les éléments correspondants avec un seul élément :

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

Prenons le code HTML suivant comme exemple :

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

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

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

Ce qui suit est l'exemple de code jQuery où le wrapper de paramètre est un function :

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




    [span#n2]    


    [label#n4]

[span#n5]
[span#n6]

Ce qui suit est l'exemple de code jQuery où le paramètre wrapper est un élément imbriqué multicouche :

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

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!