I am trying to dynamically set the css style of some divs which are listed. When I iterate over them, and set their new css values, only the last div will get the new css values.
for (var i = 0, l = list.length; i < l; i++)
{
b = list[i];
b.$block.css({
"top": b.pos.y + "px",
"left": b.pos.x + "px"
});
b.pos = b.pos.add(b.vec);
}
b.$block is the jQuery object. b.pos and b.vec are just some Vector2D instances which I use to calculate the top and left value all divs.
The css() method does affect all the jQuery objects in the collection, but if you run your code in a debugger, you can see that you are passing the same object every time: div#block3.
Your problem lies elsewhere outside of the blockSim(list) method because you are passing a list of the same object.
You forgot 3 times the keyword new:
return (Vector2D(that.x + other.x, that.y + other.y)); // line 92
return (Vector2D(that.x - other.x, that.y - other.y)); // line 96
metaList.push(createBlock(i)); // line 133
You have to write
return (new Vector2D(that.x + other.x, that.y + other.y)); // line 92
return (new Vector2D(that.x - other.x, that.y - other.y)); // line 96
metaList.push(new createBlock(i)); // line 133
Just with the new keyword the this parameter of the functions is set to a new value. Here the code: http://jsfiddle.net/6eB3U/1/
Here you have a debugged example of your code: http://jsfiddle.net/8ET77/
Consider the function createBlock():
function createBlock(idx)
{
var tmp = new Array(4);
for (var i = 0; i < 4; i++) {
if (i < 2)
tmp[i] = Math.round(Math.random() * 1000) % 600;
else
tmp[i] = Math.round(Math.random() * 10) % 4;
}
this.pos = new Vector2D(tmp[0], tmp[1]);
this.vec = new Vector2D(tmp[2], tmp[3]);
this.$block = $("#block"+idx);
return this;
}
For each call on the function, the reference this points to the same object (i.e. the function object createBlock()). The corrected function now looks like this:
function createBlock(idx)
{
var tmp = new Array(4);
for (var i = 0; i < 4; i++) {
if (i < 2)
tmp[i] = Math.round(Math.random() * 1000) % 600;
else
tmp[i] = Math.round(Math.random() * 10) % 4;
}
block = {}; // new object is generated here!
block.pos = new Vector2D(tmp[0], tmp[1]);
block.vec = new Vector2D(tmp[2], tmp[3]);
block.$block = $("#block"+idx);
return block;
}
You have to make the same correction for the function Vector2D().
Can you try to use jQuery $.each function? It is probably solve your problem.
It just may something like that.
$.each(b.$block, function( index, value ) {
$(value).css({"top" , b.pos.x + "px"});
});
$.eachto iterate over your list. Consider also to debug your code and see ifb.$blockis really a jQuery object. If it's just an element you can wrap it inside$(element)to make jQuery collection from it.