使用JQuery來改變基於屬性數組的css

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

兩個問題;

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

Abody97作爲權有關與傳遞字符串作爲參數傳遞給CSS問題。 將錯誤元素應用於.css時也存在問題（使用jQuery鏈接：http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/）。我想你想要將CSS應用於每個附加的孩子，對吧？

這裏是一個的jsfiddle，做的是：http://jsfiddle.net/U3ezb/

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'property with relative position 您有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;" 
     ]