Question

Here is a simplified example of what i’m working with, working around preexisting code:

Basically I have 2 divs I want to hide/show in multiple places(stage 1, stage 2, stage 3,etc), as so:

var blue_div = "#Blue";
var red_div = "#Red";
var blue_stage = "#Blue" + count;
var red_stage = "#Red" + count;

Adding insult to injury the div’s exist elsewhere on page and are hidden. Need to pull the content into another div for each stage. So i’m using .prepend() to grab the content, as so:

var blue_html = $(blue_div).html();
var new_div = "#new_div";

$(new_div).prepend(blue_html);
$(new_div).attr('id', blue_stage); //Changing the id based on the stage

That last part is really whats throwing me…As now I’m trying to use the new_div without first ending the script so it’s not yet in the DOM…

if ($(blue_stage).is(':hidden')) {
    $(blue_stage).show()
    $("#cancel").bind("click",function(){
        $(blue_stage).hide()
    }
}

I’ve seen a lot done with Window setTimeout() as well as setinterval and .queue(). But my attempts have all failed. Hopefully my example wasn’t confusing, any help at all is appreciated!

Answer 1

I think you can do something like this:

var $new_div = $('<div id="' + blue_stage + '"></div>');

which will allow you to edit the element directly so you can do things like:

$new_div.prepend(blue_html);

to change the id you do:

$new_div.attr('id', blue_stage)

and note when your setting the id like this you don’t need the “#” as the other answer mentions