1

div (広告バナー) を他の多数の div 内にランダムに挿入することに問題があります。

この質問から使用している実際の例を見つけました: Insert a div in a random location in a list of divs

ただし、テンプレートは、外側のコンテナー/ターゲットではなく、アイテム/子の 1 つに挿入されています。

これが私の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 -->

ここで何が間違っていますか？

4

1 に答える 1

0

に置き換え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'
    });
于 2015-10-02T21:50:37.980 に答える