Méthode JQuery d'encapsulation du DOM nodes_jquery

L'exemple de cet article décrit la méthode d'encapsulation des nœuds DOM avec JQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Si vous souhaitez envelopper un nœud avec d'autres balises, JQuery fournit la méthode correspondante, wrap(), qui est très utile pour insérer des balises structurées supplémentaires dans le document, et elle ne détruira pas la sémantique originale du document.

envelopper()

Copier le code Le code est le suivant :

$("#li_1").wrap("< ;fort> ");

Les résultats obtenus sont les suivants :

<strong>
  <li id="li_1" title="PHP编程">简单易懂的PHP编程</li>
</strong>

Il existe deux autres méthodes pour encapsuler les opérations de nœud, à savoir wrapAll() et wrapInner().

Méthode wrapAll()

Cette méthode enveloppera tous les éléments correspondants avec un seul élément. Elle est différente de la méthode wrap(), qui encapsule tous les éléments individuellement. Le code JQuery est le suivant :

Copier le code Le code est le suivant :

$(".li_2").wrapAll(" ");

Le code HTML encapsulé à l'aide de la méthode wrapAll() ressemble à ceci :

<strong>
  <li class="li_2" title="C编程">简单易懂的C编程</li>
  <li class="li_2" title="JavaScript编程">简单易懂的JavaScript编程</li>
</strong>

Méthode wrapInner()

Cette méthode enveloppe le sous-contenu (y compris les nœuds de texte) de chaque élément correspondant avec un autre balisage structuré.

Copier le code Le code est le suivant :

$("#li_4").wrapInner(" ");

Après avoir exécuté le code, il a été constaté que le contenu de la balise était enveloppé par une paire de balises

. Les résultats sont les suivants :

<li id="li_4" title="JQuery">
  <strong>简单易懂的JQuery编程</strong>
</li>

Le code JQuery pour cet exemple est le suivant :

<script type="text/javascript">
//<![CDATA[
$(function(){
  $("#btn_1").click(function(){
    //用<strong>元素把<li>元素包裹起来
    $("#li_1").wrap("<strong></strong>");
  })
  $("#btn_2").click(function(){
    $(".li_2").wrapAll("<strong></strong>");
  })
  $("#btn_3").click(function(){
    $("#li_4").wrapInner("<strong></strong>");
  })
});
//]]>
</script>

J'espère que cet article sera utile à la programmation jQuery de chacun.