时间戳

首页 > 解决方案 > 如何将div附加到jquery中的特定div？

javascript - 如何将div附加到jquery中的特定div？

问题描述

我正在尝试动态淡入具有特定高度和宽度的 div 以及与具有类的特定 div 相同的 Id，并使用该函数myBox随机定位它们。然而 div 被追加 inside 和 outside 。myBoxappend()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");
}

标签： javascriptjquery

解决方案

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

请在此处查看片段或小提琴。只是添加了背景颜色和不透明度以获得更好的演示效果。

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

希望这会帮助你。

推荐阅读