JQuery の DOM コピー方法 nodes_jquery

この記事の例では、JQuery が DOM ノードをコピーする方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ノードのコピーは、多くのショッピング Web サイトでよく使用される DOM 操作の 1 つであり、ユーザーは製品の下にある [選択] ボタンをクリックして対応する製品を購入するだけでなく、 ボタンを使用して製品をドラッグすることもできます。マウスを移動してショッピング カートに置きます。この製品ドラッグ機能は、コピー ノードを使用して、ユーザーが選択した製品のノード要素をコピーし、マウスで移動してショッピング効果を実現します。

HTML DOM 構造は次のとおりです:

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

25edfb22a4f469ecb59f1190150159c6 要素をクリックした後に別の 25edfb22a4f469ecb59f1190150159c6 要素をコピーする必要がある場合は、 clone() メソッドを使用してそれを完了できます。

JQuery コードは次のとおりです:

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

ページ上のいずれかの項目をクリックすると、その項目の新しいノードがリストの一番下に表示されます。

ノードをコピーした後、コピーされた新しい要素は何も動作しません。新しい要素にコピー機能 (この場合はクリック イベント) も必要な場合は、次の JQuery コードを使用できます:

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

パラメータ true が clone() メソッドに渡されます。これは、要素をコピーすると、その要素にバインドされているイベントもコピーされることを意味します。したがって、要素のコピーにはコピー機能もあります (この場合はクリック イベント)。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。