jquery - 用于随机定位 div 的打包机的奇怪输出

Question

我无法在一堆其他 div 中随机插入 div（广告横幅）。

我从这个问题中找到了我正在使用的工作示例：Insert a div in a random location in a list of divs

但是，我的模板被插入其中一个项目/子项，而不是它的外部容器/目标。

这是我的html：

<div class="template" style="display: none;">
    <a class="item advertisement">
        <div class="item-inner-wrapper">
            <img alt="image" src="http://placehold.it/525x765">
        </div>
    </a>
</div>

<div class="listings">

    <a class="item card" href="#">
        <div class="item-inner-wrapper">
            <img alt="" src="http://placehold.it/525x765">
        </div>
    </a>

    <a class="item card" href="#">
        <div class="item-inner-wrapper">
            <img alt="" src="http://placehold.it/525x765">
        </div>
    </a>

</div>

JS

    var insertionTemplate = $('.template').find('.item').html(),
        insertionTarget = $('.listings'),
        insertionTargetChildren = insertionTarget.find('.item'),
        insertionFrequency = 1;

    var random;
    for (var i = 0; i < insertionFrequency; i++) {
        random = Math.floor(Math.random() * insertionTargetChildren.length) + 0;
        insertionTargetChildren.eq(random).append(insertionTemplate);
    }

    $('.listings').packery({
        itemSelector: '.item'
    });

这就是我在输出中得到的：（通知.item-inner-wrapper放在最后一个.item，而不是它的父.item放在里面.listings）

<div class="listings">

    <a class="item card" href="#">
        <div class="item-inner-wrapper">
            <img alt="" src="http://placehold.it/525x765"></div>
        </div>
    </a>

    <a class="item card" href="#">
        <div class="item-inner-wrapper">
            <img alt="" src="http://placehold.it/525x765"></div>
        </div>

        <div class="item-inner-wrapper">
            <img src="http://placehold.it/525x765" alt="image">
        </div>
    </a>

</div><!-- [END] listings -->

我在这里做错了什么？

Answer 1

尝试替换append为after

 var insertionTemplate = $('.template').find('.item').html(),
            insertionTarget = $('.listings'),
            insertionTargetChildren = insertionTarget.find('.item'),
            insertionFrequency = 1;

    var random;
    for (var i = 0; i < insertionFrequency; i++) {
        random = Math.floor(Math.random() * insertionTargetChildren.length) + 0;
        insertionTargetChildren.eq(random).after(insertionTemplate);
    }

    $('.listings').packery({
        itemSelector: '.item'
    });