Is this even possible?
My main div has a div inside, I cloned it and assigned a unique data attribute to each cloned element. These cloned divs have divs inside, and I want them to be cloned too. So, how will I do it using .clone()
and .appendTo()
methods?
Here are some parts of my code:
<div id="card_grid">
<div class="cards_slot" data-unique="0" id="cards_slot">
<div class="play_cards"></div>
</div>
</div>
jQuery, JavaScript:
//Clone the card slots
for(var i=0;i<=18;i++) {
$(".cards_slot:first-child").clone().appendTo("#card_grid");
}
//Initialize the cards slots' position
$("#card_grid").children().each(function(index) {
$(this).css({
"left" : ($(this).width() + 50) * (index % 5),
"top" : ($(this).height() + 20) * Math.floor(index / 5)
});
var child_position = ($(this).parent().children().index(this));
var element_id = $(this).attr('id');
var new_id = element_id + child_position;
$(this).attr('id', new_id);
$(this).attr('data-unique', child_position);
});