0

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

5 回答 5

2

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

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

于 2012-09-23T11:02:27.610 回答
1

将您的坐标定义更改为：

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);
于 2012-09-23T10:55:28.873 回答
1

两个问题；

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/

于 2012-09-23T11:01:12.377 回答
0

你能试试下面的

$(文档).ready(函数(){

    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]);

              }
     });
于 2012-09-23T11:03:39.297 回答
0

您不能使用具有相对位置的“顶部”属性您有 2 个选择

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;"
         ]
于 2012-09-23T11:08:11.680 回答