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>

function redirectHome() {
    alert("here1");
    function setHref() {
        alert("here2");
            window.parent.location.href="fprIndex.html?action=edit&aspect=<%=request("aspect")%>&id=<%=request("Request_ID")%>";
    };

    document.forms["form1"].submit();
    var timer = setTimeout( setHref, 1000 );
}

我在这里遇到了什么问题？

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'
    });

奇怪的输出与packery用于随机定位div

1 个答案: