JQuerys Methode zum Kopieren von DOM-Knoten_jquery

Das Beispiel in diesem Artikel beschreibt, wie JQuery DOM-Knoten kopiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Das Kopieren von Knoten ist auch eine der am häufigsten verwendeten DOM-Operationen, wie z. B. der Effekt vieler Shopping-Websites. Benutzer können nicht nur auf die Schaltfläche „Auswählen“ unter dem Produkt klicken, um das entsprechende Produkt zu kaufen, sondern das Produkt auch mit ziehen Maus und legen Sie sie in den Warenkorb. Diese Funktion zum Ziehen von Produkten verwendet einen Kopierknoten, um das Knotenelement des vom Benutzer ausgewählten Produkts zu kopieren und es mit der Maus zu verschieben, um den Einkaufseffekt zu erzielen.

HTML-DOM-Struktur ist wie folgt:

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='C编程'>简单易懂的C编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery'>简单易懂的JQuery编程</li>
</ul>

Wenn Sie ein weiteres 25edfb22a4f469ecb59f1190150159c6-Element kopieren müssen, nachdem Sie auf das 25edfb22a4f469ecb59f1190150159c6-Element geklickt haben, können Sie es mit der clone()-Methode vervollständigen.

Der JQuery-Code lautet wie folgt:

$(function(){
  $(".nm_ul li").click(function(){
    $(this).clone(true).appendTo(".nm_ul");
    // 复制当前点击的节点，并将它追加到<ul>元素
  }) 
});

Nachdem Sie auf ein Element auf der Seite geklickt haben, wird am Ende der Liste ein neuer Knoten für dieses Element angezeigt.

Nach dem Kopieren eines Knotens zeigt das kopierte neue Element kein Verhalten. Wenn Sie möchten, dass das neue Element auch über eine Kopierfunktion verfügt (in diesem Fall ein Klickereignis), können Sie den folgenden JQuery-Code verwenden:

$("ul li").click(function(){ 
 $(this).clone(true).appendTo("ul"); // 注意参数true 
 //可以复制自己，并且他的副本也有同样功能。 
})

In der clone()-Methode wird ein Parameter true übergeben, was bedeutet, dass beim Kopieren des Elements auch die an das Element gebundenen Ereignisse kopiert werden. Die Kopie des Elements verfügt also auch über eine Kopierfunktion (in diesem Fall das Klickereignis).

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