为动态生成的 div 添加样式

Question

我正在处理this demo。为什么我无法为动态生成的 div 添加边距？

jQuery(function () {
    var rnd1 = Math.ceil(Math.random() * 450);
    var rnd2 = Math.ceil(Math.random() * 450);
    for (var i = 0; i < 6; i++) {
        $('.wrapper').append('<div class="box"></div>');
        //        $('.box').css({"left": rnd1,"top": rnd2});
    }
    $(".box").each(function () {
        $(this).css({
            "left": rnd1,
            "top": rnd2
        });
    });

如你所见，我两种都试过了：

$('.box').css({"left": rnd1,"top": rnd2});

在循环内部并使用.each() 作为：

 $(".box").each(function () {
        $(this).css({
            "left": rnd1,
            "top": rnd2
        });
    });

在循环之外，但显然他们没有做这项工作！

Answer 1

因为您没有添加边距，所以您正在设置 top 和 left 位置，并且仅在元素没有静态位置时才有效

$(this).css({"left": rnd1,"top": rnd2, position: 'relative'});

或者您实际上可以添加边距

$(this).css({"margin-left": rnd1, "margin-top": rnd2});

作为旁注，您可以在创建元素时添加样式，第二个循环是不必要的

for (var i = 0; i < 6; i++) {
    $('.wrapper').append(
        $('<div />', {
            'class' : 'box',
            css : {
                marginLeft : rnd1,
                marginTop  : rnd2
            }
        })
    );
}