Question

如何将div插入div容器内的随机位置？与Insert a div in a random location in a list of divs类似，但我没有使用列表。

现在它出现在随机容器div中，而不是随机出现在容器内：

HTML：

<div class="template" style="display: none;">
  <div class="image">
    <img src="http://placekitten.com/75/150">
  </div>
</div>
<div class="main">
  <div class="image">
    <img src="http://lorempixel.com/75/150">
  </div>
  <div class="image">
    <img src="http://lorempixel.com/75/150">
  </div>
  <div class="image">
    <img src="http://lorempixel.com/75/150">
  </div>
</div>

JS：

var template = $('.template').find('.image').clone(),
  target = $('.main'),
  targetChildren = target.find('.image'),
  random = Math.floor(Math.random() * targetChildren.length);

targetChildren.eq(random).append(template);

Answer 1

你快到了。您只需将append更改为after;改变：

insertionTargetChildren.eq(random).append(insertionTemplate);

致：

insertionTargetChildren.eq(random).after(insertionTemplate);

您当前的代码将新div插入另一个div，如下所示：

<div class="image" style="position: absolute; left: 150px; top: 310px;">
    <img src="http://lorempixel.com/75/150">
  <div class="image" style="position: absolute; left: 225px; top: 310px;">
    <img src="http://placekitten.com/75/150">
  </div>
</div>

新版本将产生以下内容：

<div class="image" style="position: absolute; left: 150px; top: 310px;">
    <img src="http://lorempixel.com/75/150">
</div>
<div class="image" style="position: absolute; left: 225px; top: 310px;">
  <img src="http://placekitten.com/75/150">
</div>

Answer 2

这将把它置于随机位置：

random = Math.floor(Math.random() * (targetChildren.length+1));
if(random > targetChildren.length){
   target.append(template);
}else{
    targetChildren.eq(random).before(template);
}

targetChildren.length+1是为了增加在最后一个地方追加的可能性;）

Answer 3

你非常接近！

而不是.clone()，请尝试使用.html()，例如下面的示例。

另外，我稍微改变了你的循环和随机数生成器。

现在效果很好。刷新页面以查看在其他图像中添加的三张随机小猫照片。

WORKING EXAMPLE

将div插入div容器内的随机位置

3 个答案: