Question

以下是我尝试做的一个示例，虽然最初我正在尝试更复杂的事情，但我已经跟踪了这段代码的问题。我确信这个问题与传递给数组的内容有关，但我的所有尝试都得到了相同的结果，角落里有四个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>

Answer 1

Abody97对于将字符串作为参数传递给css的问题是正确的。将.css应用于错误的元素也是一个问题（因为jQuery链接：http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/）。我想你想要将css应用于每个追加的孩子，对吧？

这是一个jsFiddle：http://jsfiddle.net/U3ezb/

Answer 2

将坐标定义更改为：

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

这里的关键是你需要将一个对象作为参数传递给.css()，而不是一个字符串。

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

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

.css()正在调用

$("#parent")。要在新添加的div上应用它，请使用以下内容：

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

Answer 3

两个问题;

1）你需要摆脱坐标数组中每个对象周围的引用，如下所示：

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

2）然后你需要将css应用于<div>，而不是#parent。

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

这是一个jsFiddle，让你展示它工作http://jsfiddle.net/BZpRG/

Answer 4

你可以尝试以下

（文档）$。就绪（函数（）{

    var coordinates = ['100px',200px','300px','400px'];
    var numberOfDivs = coordinates.length;
        for (i=0; i<numberOfDivs; i++){

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

              }
     });

Answer 5

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

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

或者

 var coordinates = [
         "margin-top: 100px;",
         "margin-top: 200px;",
         "margin-top: 300px;",
         "margin-top: 400px;"
         ]

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

5 个答案: