title: Using JQuery to change css based on an array of attributes
body: <p>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.</p>
  
  <pre><code>--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&lt;numberOfDivs; i++){
  $('#parent').append('&lt;div&gt;'+i+'&lt;/div&gt;').css(coordinates[i]);
  }
  }); 
  
  --HTML--
  
  &lt;div id = "parent"&gt;
      parent
  &lt;/div&gt;
  </code></pre>