CODEWITHSUNDEEP
jqueryhtmlclone
user3501587
user3501587

Reputation: 425

Add 1 to class name on clone (jquery)

I'm created simple script, this is my jquery:

// 
$('.sections a').click(function (e) {
    var clone = $('.sections a ~ div:last').clone();

    $('.sections a').after(clone);
});

and html

<div class="sections">

    <a href="#add_section">Add section</a>

    <div class="section_1">
        <input type="hidden" name="section_1">
    </div>

</div>

and after click link "add section", my script clone last div after anchor. and with next click i want add one to class and input value for example:

    <div class="section_1">
        <input type="hidden" name="section_1">
    </div>

    <div class="section_2">
        <input type="hidden" name="section_2">
    </div>

    <div class="section_3">
        <input type="hidden" name="section_3">
    </div>

Upvotes: 0

Views: 126

Answers (3)

Diego
Diego

Reputation: 495

Add this code to your js:

var clones=1;
$('.sections a').click(function (e) {
    var clone = $('.sections a ~ div:last').clone();
    $('.sections a ~ div:last').after(clone);
    clones++;
    clone.attr('class','section_'+clones);
    clone.find('input[type="hidden"]').attr('name','section_'+clones);
});

demo

Sorry... I haven't seen the answer of @twain. It's practically the same, I hope the demo helps

Upvotes: 1

twain
twain

Reputation: 1325

Try this (its a bit dirty, but it should work):

$('.sections a').click(function (e) {
    var clone = $('.sections a ~ div:last').clone();
    var currentClass = $('.sections a ~ div:last').attr("class");
    var currentId = currentClass.substr(currentClass.length -1);
    currentId++;

    $(clone).attr("class", "section_" + currentId);
    $(clone).find("input").attr("name", "section_" + currentId);
    $('.sections a ~ div:last').after(clone);
});

Upvotes: 1

Zach Leighton
Zach Leighton

Reputation: 1941

Try binding to the document and filtering on the element

$(document).on('click', '.sections a', function (e) {
    var clone = $('.sections a ~ div:last').clone();

    //increment attributes here


    $('.sections a').after(clone);
});

Upvotes: 1

Related Questions