Yes, that title may seem strange, but here is my problem. I've got a div .experiment
inside that div I have span tags which randomly change their colour. Usually if I wanted to create a duplicate I would have just copied markup, however if I do this in this case all duplicated spans inside the div will remain random, therefore be different from original ones. Is there a way to actually duplicate a div?
EDIT: I tried to figure it out with a .clone();
of jQUery, but had no success in a nutshell, I have following markup:
<div id="post-1">
...
<div class="eq">
<span class="bar-1"></span>
<span class="bar-1"></span>
<span class="bar-1"></span>
<span class="bar-1"></span>
<span class="bar-1"></span>
<span class="bar-separator"></span>
<!-- Duplicate .bar's go here -->
</div>
...
</div>
And following JavaScript:
// This is called when certain events happen
$(".bar").each(function(i) {
fluctuate($(this));
});
//This is a fluctuate function itself
function fluctuate(bar) {
var hgt = Math.random() * 15;
hgt += 1;
var t = hgt * 20;
bar.animate({
height: hgt * 2,
top: hgt
}, t, function() {
fluctuate($(this));
});
}
What happens is that each span with class="bar-1" starts randomly changing height. I need to somehow exactly duplicate all these 5 span bars and place them after span with class="bar-separator"
. The Difficulty How do I copy them exactly with all random height changes associated to them? Furthermore is it possible to display them in a mirrored way e.g where first span in original data is displayed as last span in duplicated data? Even more difficult each span has a class="bar-" and than some numerical value which is dependant on what number is in #post-[id]
div. So there are several bar instances on a page, but each group has their own number after bar-
. So how to achieve complete duplication of only specific group of bar's?