JQuery adding class to cloned element

Question

This is my script:

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

I need to add a class to the new element that is being created. Is it possible?

Lave

Answer 1

Yes, it is:

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

Although you're cloning an element based on its id, $('#clone'), so note that there will be two elements sharing the same id, which makes the result invalid HTML, so I'd suggest:

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

This will effectively add the number 1 to the end of the end of the current id value. To make this more dynamic you'd probably need to base it on a count of the number of elements of the new class-name:

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

Gardner

Answer 2

Sure.

After the .clone() method the current element is the clone..

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

---

Notice

you will need to change the id of the clone as it must be unique in the DOM and when you clone that element, the id is cloned as well..

So better to do something like

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

Ochoa