Méthode JQuery de copie du DOM nodes_jquery

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

La copie de nœuds est également l'une des opérations DOM couramment utilisées, comme l'effet de nombreux sites Web d'achats. Les utilisateurs peuvent non seulement cliquer sur le bouton « Sélectionner » sous le produit pour acheter le produit correspondant, mais également faire glisser le produit avec le produit. souris et placez-le dans le panier. Cette fonction de glissement de produit utilise un nœud de copie pour copier l'élément de nœud du produit sélectionné par l'utilisateur et le déplace avec la souris pour obtenir l'effet d'achat.

La structure HTML DOM est la suivante :

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

Si vous devez copier un autre élément

après avoir cliqué sur l'élément

, vous pouvez utiliser la méthode clone() pour le compléter.

Le code JQuery est le suivant :

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

Après avoir cliqué sur un élément de la page, un nouveau nœud pour cet élément apparaîtra au bas de la liste.

Après avoir copié un nœud, le nouvel élément copié n'a aucun comportement. Si vous avez besoin que le nouvel élément ait également une fonctionnalité de copie (événement click dans ce cas), vous pouvez utiliser le code JQuery suivant :

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

Un paramètre true est passé dans la méthode clone(), ce qui signifie que lors de la copie de l'élément, les événements liés à l'élément sont également copiés. Ainsi, la copie de l'élément a également une fonctionnalité de copie (dans ce cas, l'événement click).

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