Question

我正在尝试使用类myBox动态地将具有特定高度和宽度并具有相同ID的div淡入div，并使用myBox函数将它们随机放置在append()中。但是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的评论为您提供了答案，但我只是增强了它。需要在主div上设置css的overflow: hidden属性以停止显示主div之外的子对象。

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

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

添加似乎正确完成，但是我在这里看到的第一个问题是您正在设置top和left属性，但是未设置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);

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

2 个答案: