Dynamically added div with length = 0?
Question
so I am trying to check if I already added the a div with the same id and if I did, I chage its color to red. But for some reason my divs have a length of 0 and the if clause is never true.
I've been doing some research and this is very often due to a float, but I don't have one. I am just positionting my divs absolutely and appending them to the body.
Please have a look, any help I will be grateful for! Thanks.
<body>
<style>
#box {
background: url('a.gif') no-repeat;
width: 50px;
height: 30px;
position: absolute;
top:210px;
left: 0;
}
#grid {
background: url('grid.gif') no-repeat;
width: 423px;
height: 240px;
margin-left: 4px;
}
#stand {
background: black;
width: 4px;
height: 240px;
margin-left: 23px;
}
#hstand {
/*horizontal stand for the carrier*/
width: 423px;
margin-left: 27px;
height: 4px;
background: black;
}
</style>
<script>
$(function() {
$('#box').click(function(e) {
var i = 0;
while (i < 50) { //specifying the cycles for the box' movement
var hstandWidth = $("#hstand").width() + 27; //getting the current x-coordinates
//array to randomly select x-coordinates from
var items = Array(hstandWidth - (50) * 1, hstandWidth - (50) * 2, hstandWidth - (50) * 3, hstandWidth - (50) * 4, hstandWidth - (50) * 5, hstandWidth - (50) * 6, hstandWidth - (50) * 7, hstandWidth - (50) * 8);
//variable with the x-coordinates, which are randomly fetched from the array
var moveLeft = items[Math.floor(Math.random() * items.length)];
//array to randomly select y-coordinates from
var items2 = Array(30, 30 * 2, 30 * 3, 30 * 4, 30 * 5, 30 * 6, 30 * 7);
//variable with the y-coordinates, which are randomly fetched from the array
var moveTop = items2[Math.floor(Math.random() * items2.length)];
// y-achs movement
$(this).animate({
"top": "" + moveTop + "px"
}, 80);
// x-achs movement with the callback function which should add the colored div to every position the box has been
// create closure to capture moveTop and moveLeft values for later callback
// use different named variables xmoveTop and xmoveLeft to distinguish the
// closure variable from the outer for loop variable
(function(obj, xmoveTop, xmoveLeft) {
$(obj).animate({
"left": "" + xmoveLeft + "px"
}, 80, function() {
if ($("#" + xmoveLeft + xmoveTop + "").length > 0) {
$("#" + xmoveLeft + xmoveTop + "").css("background", "red");
} else {
$("<div style='position: absolute; top: " + xmoveTop + "px; left: " + xmoveLeft + "px; background: blue; width: 50px; height: 30px;' id='" + xmoveTop + xmoveLeft + "'></div>").appendTo("body");
console.log($("#" + xmoveLeft + xmoveTop + "").length);
}
});
})(this, moveTop, moveLeft);
//get the box to the initial position
$(this).animate({
"left": "0px"
}, 80);
$(this).animate({
"top": "210px"
}, 80);
//mark cycle passed
i++;
}
});
});
</script>
</head>
<body>
<div id="box"></div>
<div id="stand">
<div id="grid"></div>
</div>
<div id="hstand"></div>
</body>
2 answers
solution1
1 2013-12-03 15:03:43
You create your div with id="xmoveTop + xmoveLeft" but you search for it with id="xmoveLeft + xmoveTop ".
So change this line :
if ($("#" + xmoveLeft + xmoveTop + "").length > 0) {
$("#" + xmoveLeft + xmoveTop + "").css("background", "red");
To :
if ($("#" + xmoveTop + xmoveLeft + "").length > 0) {
$("#" + xmoveTop + xmoveLeft + "").css("background", "red");
solution2
1 2013-12-03 15:03:54
You search for
"#"+xmoveLeft + xmoveTop +""
but you create the id with
" id='"+ xmoveTop + xmoveLeft +"'"
Since they are created as strings you do not use the sum but concatenated strings..
Wrap them in parenthesis, so you get the actual sum ..
"#"+ (xmoveLeft + xmoveTop) +"" and id='"+ (xmoveTop + xmoveLeft) +"'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.