JQuerys Methode zum Umschließen von DOM-Knoten_jquery

Das Beispiel in diesem Artikel beschreibt die Methode zum Umschließen von DOM-Knoten mit JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Wenn Sie einen Knoten mit anderen Tags umschließen möchten, stellt JQuery die entsprechende Methode „wrap()“ bereit, die zum Einfügen zusätzlicher strukturierter Tags in das Dokument sehr nützlich ist und die ursprüngliche Dokumentsemantik nicht zerstört.

wrap()

Code kopieren Der Code lautet wie folgt:

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

Die erhaltenen Ergebnisse sind wie folgt:

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

Es gibt zwei weitere Methoden zum Umschließen von Knotenoperationen, nämlich wrapAll() und wrapInner().

wrapAll()-Methode

Diese Methode umschließt alle übereinstimmenden Elemente mit einem Element. Sie unterscheidet sich von der Methode wrap(), die alle Elemente einzeln umschließt. Der JQuery-Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

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

Der mit der Methode wrapAll() umschlossene HTML-Code sieht folgendermaßen aus:

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

wrapInner()-Methode

Diese Methode umschließt den Unterinhalt (einschließlich Textknoten) jedes übereinstimmenden Elements mit anderem strukturiertem Markup.

Code kopieren Der Code lautet wie folgt:

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

Nachdem der Code ausgeführt wurde, wurde festgestellt, dass der Inhalt im -Tag durch ein Paar

umschlossen war

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

Der JQuery-Code für dieses Beispiel lautet wie folgt:

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

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.