奇怪的輸出與packery用於隨機位置div

Question

我有麻煩插入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' 
    });