如何在jQuery中将div附加到特定的div？

Question

我正在尝试使用myBox类将具有特定高度和宽度以及相同ID的动态fadingIn div动态分配到特定div，并使用append()函数append()它们随机myBox在myBox 。 但是div附加在myBox内部和外部。

这是我的代码。 怎么了？

var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) {
  var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
  var top = Math.random() * 700 - 30;
  var left = Math.random() * 1200;

  $($newdiv1).css({
    "top": top,
    "left": left
  });

  $($newdiv1).css('background-color', getRandomColor);
  $(".myBox").append($newdiv1).fadeIn("slow");
}

Answer 1

通过查看您的问题，我认为Rory的评论为您提供了答案，但我只是增强了它。 需要设置overflow: hidden main div上css的overflow: hidden属性以停止显示main div之外的子对象。

请在此处查看代码段或Fiddle 。 只是添加了背景颜色和不透明度，以获得更好的呈现效果。

 $(function(){ var xx = Math.random() * 100; for (var i = 0; i < xx; i++) { var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>"); var top = Math.random() * 700 - 30; var left = Math.random() * 1200; $($newdiv1).css({ "top": top, "left": left }); $($newdiv1).css('background-color', '#C00'); //getRandomColor); $(".myBox").append($newdiv1).fadeIn("slow"); } }); 

 .myBox { width: 500px; height: 300px; position: relative; background-color: orange; overflow: hidden; } .myBox div { position: absolute; opacity: 0.5; border: 1px solid green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="myBox"></div> 

希望这会帮助你。

Answer 2

追加似乎正确完成，但是我在这里看到的第一个问题是您正在设置顶部和左侧属性，但是未设置position属性。 您应该在样式表中添加一些内容，以指定主容器和子div的position属性。 例：

.myBox {
  position: absolute;
}

.myBox div {
  position: relative;
}

也是另一回事。 您将$ newdiv1指定为jQuery对象：

var $newdiv1 = $(...)

然后再次用$（）包装它。 这应该足够了：

$newdiv1.css({
    "top": top,
    "left": left
  });
$newdiv1.css('background-color', getRandomColor);