CODEWITHSUNDEEP
javascriptjquery
Gezzasa
Gezzasa

Reputation: 1453

Cloning divs and replacing id's

Hoping this isnt a repeat question as I could not find an answer.

I have a div that I need cloned.

<div class="phoneBookEntriesContainer">
    content here
</div>

I have to add an ID afterwards...dont ask :P.

<script type="text/javascript">
var i = 1;
$(".phoneBookEntriesContainer").attr("id","phoneBookEntries" + i);
var doSomething = function(){

    $(".phoneBookEntriesContainer").attr("id","phoneBookEntries" + i);
    $("#phoneBookEntries" + i).clone().insertAfter("#phoneBookEntries" + i);

    i ++;
};
</script>

The code above kinda works, but instead of giving my divs unique id's, it replaces all of them with the same id.

So at the start I would have one #phoneBookEntries1 div, after clicking the button to run the function I have two #phoneBookEntries2 divs etc etc.

Upvotes: 0

Views: 314

Answers (6)

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

Your code seemed a bit confusing so I created a very verbose version here: http://jsfiddle.net/SY3aA/2/

Click the content in the working example and it adds another (you will want to modify that I would think)

First off, I give your first one an Id attribute with 0; I put some class add/remove in so you could see what was going on. I added text for that same purpose to reflect THAT added elements id.

var i = 1;
$(".phoneBookEntriesContainer").attr("id", "phoneBookEntries0");

var doSomething = function() {
    var myclone = $(".phoneBookEntriesContainer").eq(0).clone();
    $(".phoneBookEntriesContainer").removeClass("lastAdd imprev");

    var myentry = 'phoneBookEntries' + i;
    var myPrevEntry = '#phoneBookEntries' + (i - 1);
    var prev = $(myPrevEntry);
    prev.addClass('imprev');
    myclone.attr('id', myentry).insertAfter(prev);
    $('#' + myentry).text($('#' + myentry).text() + myentry);
    //this toggle seemed confusing so I changed it
    $('#' + myentry).addClass("lastAdd");

    i++;
}

$(document).on("click", '.phoneBookEntriesContainer', function() {
    $(".phoneBookEntriesContainer").removeClass("mydiv");
    $(this).addClass('mydiv');
    doSomething();
});

with this CSS:

.mydiv{border:solid 1px lime;}
.lastAdd{background-color:aqua;}
.imprev{border:solid blue 2px;}

Upvotes: 0

Louis Grellet
Louis Grellet

Reputation: 1093

<div class="content"></div>

javascript :

var myFuntion = function(){
   var id = '' + $('.content').children().length;
   $('.content').append("<div class='phoneBookEntriesContainer' id='"+ id +"'></div>");
}

it will add your entries in the .content div with

Upvotes: 0

Ayush
Ayush

Reputation: 42450

$(".phoneBookEntriesContainer") returns an array of all DOM elements that have the class phoneBookEntriesContainer. Thus when you use attr, it replaces the id on all of those elements. If you want to replace it on a specific element only, you need to specify which one.

You can do that in the following ways:

//picks the last instance
$(".phoneBookEntriesContainer").last().attr("id","phoneBookEntries" + i);

//picks the last instance
$(".phoneBookEntriesContainer").first().attr("id","phoneBookEntries" + i);

//picks the 3rd instance
//.eq() is 0-indexed
$(".phoneBookEntriesContainer").eq(2).attr("id","phoneBookEntries" + i);

To achieve what you want, you should loop over all elements using jQuery's .each() method. For details, see Hidde's answer.

If you want to clone your div and give it a new ID everytime, use a variable to keep track of the number to be appended.

See the demo here

This is the Jquery code

$(document).ready(function(){

        var currentID = 1;

        $('button').on('click',function(){
            currentID++;
            $('.foobar')
                .first()
                .clone()
                .appendTo('#wrapper')
                .attr('id','span' + currentID)
                .text('This has an ID of ' + currentID);

        });

});​

Upvotes: 3

Taha Paksu
Taha Paksu

Reputation: 15616

// set first container id
$(".phoneBookEntriesContainer").attr("id","phoneBookEntries1");

// on button click
$("#mybutton").click(function(){
    // calculate the new ID as phoneBookEntries count + 1
    var newID = "phoneBookEntries" + ($("div[id^='phoneBookEntries']").size() + 1);
    // insert the new div after the last one
    $("<div id='"+newID+"'></div>").insertAfter($("div[id^='phoneBookEntries']").last());
    // add the class to the divs which doesn't have it
    $("div[id^='phoneBookEntries']").addClass("phoneBookEntriesContainer");
});

Upvotes: 0

dSquared
dSquared

Reputation: 9835

You could use the length property to get the total number of elements and append that to your ID prefix like this:

HTML

<div class="phoneBookEntriesContainer">
    content here
</div>

<a href="#" class="cloneDiv">Click to Clone</a>

JavaScript

// Bind to Clone Button //
$('.cloneDiv').bind('click', function(e){  

    // Prevent Default Action //
    e.preventDefault();

    // Create Clone //
    var $clone = $('.phoneBookEntriesContainer').filter(':last').clone();

    // Create Unique ID using Length //
    var cloneID = 'phoneBookEntries'+$('.phoneBookEntriesContainer').length;

    // Append to Body and Add Unique ID //
    $clone.attr('id', cloneID);
    $('.phoneBookEntriesContainer').filter(':last').after($clone);
});​

JSFiddle Here

I hope this helps!

Upvotes: 0

Hidde
Hidde

Reputation: 11971

I'd suggest looping over each .phoneBookEntriesContainer:

$(".phoneBookEntriesContainer").each (function (i, el) {
    el.attr('id', ('phoneBookEntries' + (i+1)));
});

Upvotes: 2

Related Questions