Pertanyaan elemen kloning, menghindari lebih dari satu klon pada saat menambahkan


http://jsfiddle.net/p57hm/

Saya hanya ingin satu klon lebih pada setiap klik. Apakah saya melewatkan sesuatu yang jelas? Terima kasih

Naskah:

$(function(){

    $('input').click(function(){
        $('.cloneitem').clone().appendTo('#container');
    });

});

HTML:

<input type="button" value="clone it"/>

<div id="container"></div>

<div class="cloneitem">clone</div>

8
2017-11-28 15:29


asal


Jawaban:


Coba ini http://jsfiddle.net/p57hm/1/

$(function(){

    $('input').click(function(){
        $('.cloneitem:first').clone().appendTo('#container');
    });

});

Saat ini Anda mengkloning semua elemen yang ada di kelas .cloneitem tetapi Anda hanya menginginkan 1 pada satu waktu, jadi Anda tidak ingin memilih semua .cloneItem tapi hanya yang pertama, dan klon yang itu.


29
2017-11-28 15:31



Klon Anda masih memiliki kelas cloneitem jadi karena itu sedang dikloning lagi. Hapus kelas ini atau ubah pemilih agar tidak menyertakannya.

Sesuatu seperti ini, menambahkan klon kelas dan memfilter item-item tersebut:

$(function(){
    $('input').click(function(){
        $('.cloneitem').not('.cloned').clone().addClass('cloned').appendTo('#container');
    });    
});

http://jsfiddle.net/infernalbadger/p57hm/4/


3
2017-11-28 15:32



$('.cloneitem') memilih semua elemen dengan cloneitem kelas.

menggunakan .first():

$('input').click(function(){
    $('.cloneitem').first().clone().appendTo('#container');
});

2
2017-11-28 15:33



Anda mengkloning elemen dengan class "cloneitem" dan kemudian menambahkan elemen klon dengan kelas yang sama yang menyebabkan masalah untuk clone berikutnya.

$(function() {

    $('input').click(function(){
        $('.cloneitem').first().clone().removeClass('cloneItem').appendTo('#container');
    }); // edited

});

1
2017-11-28 15:34



Punya masalah yang sama. Tambahkan id ke div yang ingin Anda kloning dengan cara itu unik. Sebuah elemen hanya dapat memiliki satu id tetapi banyak kelas.


1
2018-05-22 23:23



Anda mengkloning semua elemen dengan kelas 'cloneitem', jadi pertama kali klon sekali, di kedua kalinya klon dua .. Anda dapat memperbaikinya dengan hanya memfilter objek pertama seperti ini:

$(function(){

    $('input').click(function(){
        $('.cloneitem').first().clone().appendTo('#container');
    });

});

Anda juga selalu dapat memilih yang terakhir:

$('.cloneitem').last().clone().appendTo('#container');

Atau cukup ikat .clone () ke item pertama:

$('.cloneitem:first').clone().appendTo('#container');

0
2017-11-28 15:34



$(function(){
    var clone = $('.cloneitem').clone();
    $('input').click(function(){
        clone.clone().appendTo('#container');
    });
});

http://jsfiddle.net/tZuDe/


-1
2017-11-28 15:32