Kaedah JQuery menyalin DOM nodes_jquery

Contoh dalam artikel ini menerangkan cara JQuery menyalin nod DOM. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Menyalin nod juga merupakan salah satu operasi DOM yang biasa digunakan, seperti kesan daripada banyak tapak web beli-belah Pengguna bukan sahaja boleh mengklik butang "Pilih" di bawah produk untuk membeli produk yang sepadan, tetapi juga menyeret produk dengan tetikus dan letakkan di dalam troli beli-belah. Fungsi seret produk ini menggunakan nod salin untuk menyalin elemen nod produk yang dipilih oleh pengguna dan menggerakkannya dengan tetikus untuk mencapai kesan beli-belah.

Struktur DOM HTML adalah seperti berikut:

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

Jika anda perlu menyalin elemen

yang lain selepas mengklik elemen

Kod JQuery adalah seperti berikut:

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

Selepas mengklik mana-mana item pada halaman, nod baharu untuk item itu akan muncul di bahagian bawah senarai.

Selepas menyalin nod, elemen baharu yang disalin tidak mempunyai sebarang gelagat. Jika anda memerlukan elemen baharu untuk turut mempunyai fungsi salin (klik acara dalam kes ini), anda boleh menggunakan kod JQuery berikut:

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

Parameter benar diluluskan dalam kaedah klon(), yang bermaksud bahawa apabila menyalin elemen, peristiwa yang terikat pada elemen juga disalin. Jadi salinan elemen juga mempunyai fungsi salin (dalam kes ini acara klik).

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.