使用JQuery根据属性数组更改css

下面是我试图做的一个例子，虽然最初我尝试的是更复杂的事情，但我已经将问题跟踪到了这段代码。我确信这个问题与传递给数组的内容有关，但我所有的尝试都得到了相同的结果，四个div在角落里彼此重叠

--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>

--CSS--
div{
位置：绝对位置；
边框：2件纯黑；
}
--剧本--
$（文档）.ready（函数（）{
变量坐标=[
“{'top'：'100px'}”，
“{'top'：'200px'}”，
“{'top'：'300px'}”，
“{'top'：'400px'}”
]
var numberOfDivs=坐标.length；
对于（i=0；i将坐标定义更改为：

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

这里的关键是，您需要将对象作为参数传递给
.css（）
，而不是字符串

注意：（感谢@MartinLodgberg指出这一点）；另一个问题是，当您这样做时：

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

将坐标定义更改为：

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

这里的关键是，您需要将对象作为参数传递给
.css（）
，而不是字符串

注意：（感谢@MartinLodgberg指出这一点）；另一个问题是，当您这样做时：

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

两个问题

1） 您需要消除坐标数组中每个对象周围的引号，如下所示：

var div = $("<div>" + i + "</div>").css(coordinates[i]);
$("#parent").append(div);

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

2） 然后需要将css应用于
，而不是应用于#父对象

$（“”）.appendTo（'#parent'）.css（坐标[i]）；

这里有一个jsFiddle让您演示它如何工作
两个问题

1） 您需要消除坐标数组中每个对象周围的引号，如下所示：

var div = $("<div>" + i + "</div>").css(coordinates[i]);
$("#parent").append(div);

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

2） 然后需要将css应用于
，而不是应用于#父对象

$（“”）.appendTo（'#parent'）.css（坐标[i]）；

下面是一个JSFIDLE，向您展示了如何正确地将字符串作为参数传递给css。
您在将.css应用到错误的元素时也有问题（因为jQuery链接：）。我想您希望将css应用到每个附加的子元素，对吗

这里有一个JSFIDLE可以做到这一点：
Abody97关于将字符串作为参数传递给css的问题是正确的。
您在将.css应用到错误的元素时也有问题（因为jQuery链接：）。我想您希望将css应用到每个附加的子元素，对吗

这里有一个JSFIDLE可以做到这一点：
您可以尝试以下方法吗

$（文档）.ready（函数（）{

var坐标=['100px'，200px'，'300px'，'400px']；
var numberOfDivs=坐标.length；
对于（i=0；i你能试试下面的方法吗

$（文档）.ready（函数（）{

var坐标=['100px'，200px'，'300px'，'400px']；
var numberOfDivs=坐标.length；
对于（i=0；i您不能将“top”属性与相对位置一起使用
你有两个选择

var coordinates = [
        "top: 100px; position : absolute;",
        "top: 200px; position : absolute;",
        "top: 300px; position : absolute;",
        "top: 400px; position : absolute;"
        ]

或

不能将“top”属性与相对位置一起使用
你有两个选择

var coordinates = [
        "top: 100px; position : absolute;",
        "top: 200px; position : absolute;",
        "top: 300px; position : absolute;",
        "top: 400px; position : absolute;"
        ]

或

那么问题是什么？问题是什么？他已经有了
position:absolute；
set…一点都不相对他已经有了
position:absolute；
set…一点都不相对谢谢你和其他回答的人。我现在明白我做错了什么，我已经试过传递对象了，这是家长的问题我没有意识到。谢谢你和其他回复我的人。我现在明白我做错了什么，我已经试过传递物体了，这是我没有意识到的家长问题。