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

Question

如何将一个 div 插入到 div 容器内的随机位置？ 类似于 Insert a div in a random location in a list of divs除了我没有使用列表。

现在它出现在随机容器 div 中，而不是随机出现在容器本身中:

http://jsfiddle.net/frank_o/QXdL3/15/

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>