Question

Here is an example of what I am trying to do, although originally I was attempting something more complicated I have tracked the problem to this bit of code. I am sure the problem relates to what is being passed to the array but all my attempts get the same result, four divs on top of each other in the corner.

--CSS--

div {
    position : absolute;
    border: 2px solid black;
}

--SCRIPT--

$(document).ready(function(){

var coordinates = [
"{'top' : '100px'}",
"{'top' : '200px'}",
"{'top' : '300px'}",
"{'top' : '400px'}"
]

var numberOfDivs = coordinates.length;

for (i=0; i<numberOfDivs; i++){
$('#parent').append('<div>'+i+'</div>').css(coordinates[i]);
}
}); 

--HTML--

<div id = "parent">
    parent
</div>

Answer 1

Two problems;

1) you need to get rid of the quotations around each object in the coordinates array like this:

var coordinates = [
{'top' : '100px'},
{'top' : '200px'},
{'top' : '300px'},
{'top' : '400px'}
]

2) you need to then apply the css to the <div>, not to the #parent.

$("<div></div>").appendTo('#parent').css(coordinates[i]);

Here is a jsFiddle for you to show it working http://jsfiddle.net/BZpRG/