JQuery thêm lớp để nhân bản vô tính thành phần

Question

Đây là kịch bản của tôi:

$('.addprop').click(function() { 
     $('#clone').clone().insertAfter('.addprop'); 
    }) 

tôi cần phải thêm một lớp học để các yếu tố mới đang được tạo ra. Có thể không?

Answer 1

Vâng, đó là:

$('.addprop').click(function() { 
     $('#clone').clone().addClass('newClass').insertAfter('.addprop'); 
    }) 

Mặc dù bạn đang nhân bản một yếu tố dựa trên nó id, $('#clone'), vì vậy lưu ý rằng sẽ có hai yếu tố chia sẻ cùng id, mà làm cho kết quả HTML không hợp lệ, vì vậy tôi muốn đề nghị:

$('.addprop').click(function() { 
     $('#clone').clone().attr('id',id += 1).addClass('newClass').insertAfter('.addprop'); 
    }); 

này một cách hiệu quả sẽ thêm số 1 đến cuối giá trị id hiện tại. Để làm điều này năng động hơn, bạn có thể cần phải căn cứ vào số lượng yếu tố của tên lớp mới:

$('.addprop').click(function() { 
     $('#clone').clone().attr('id',id += $('.newClass').length).addClass('newClass').insertAfter('.addprop'); 
    }); 

Answer 2

Chắc chắn.

Sau khi phương pháp .clone() hiện hành yếu tố là clone ..

$('#clone').clone().addClass('class-name-here').insertAfter('.addprop'); 

---

Thông báo

bạn sẽ cần phải thay đổi id của clone vì nó phải là duy nhất trong DOM và khi bạn sao chép phần tử đó, id cũng được nhân bản vô tính ..

Vì vậy, tốt hơn để làm điều gì đó như

$('#clone').clone().attr('id','newid').addClass('class-name-here').insertAfter('.addprop');