0

これが私がやろうとしていることの例ですが、もともと私はもっと複雑なことを試みていましたが、このコードのビットで問題を追跡しました。問題は配列に渡されているものに関連していると確信していますが、すべての試行で同じ結果が得られ、コーナーで4つの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

文字列をパラメータとしてcssに渡す際の問題についてはAbody97が正しい。間違った要素に.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に感謝します）; もう1つの問題は、次の場合です。

$('#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

2つの問題。

1）次のように座標配列内の各オブジェクトの周りの引用符を取り除く必要があります。

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

<div>2）次に、cssを#parentではなく、に適用する必要があります。

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

これは、動作していることを示すためのjsFiddleですhttp://jsfiddle.net/BZpRG/

于 2012-09-23T11:01:12.377 に答える
0

次のことを試してみてください

$（document）.ready（function（）{

    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

相対位置で「top」プロパティを使用することはできません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 に答える