jquery - Weird output with packery used to randomly position div -


i'm having trouble inserting div (ad banner) randomly within bunch of other divs.

i found working example i'm using question: insert div in random location in list of divs

however, template being inserted within 1 of items/children, rather it's outer container/target.

here's 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> 

the js

    var insertiontemplate = $('.template').find('.item').html(),         insertiontarget = $('.listings'),         insertiontargetchildren = insertiontarget.find('.item'),         insertionfrequency = 1;      var random;     (var = 0; < insertionfrequency; i++) {         random = math.floor(math.random() * insertiontargetchildren.length) + 0;         insertiontargetchildren.eq(random).append(insertiontemplate);     }      $('.listings').packery({         itemselector: '.item'     }); 

and in output: (notice .item-inner-wrapper placed within last .item, rather it's parent .item being placed within .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 --> 

what have got wrong here?

try replace append after

 var insertiontemplate = $('.template').find('.item').html(),             insertiontarget = $('.listings'),             insertiontargetchildren = insertiontarget.find('.item'),             insertionfrequency = 1;      var random;     (var = 0; < insertionfrequency; i++) {         random = math.floor(math.random() * insertiontargetchildren.length) + 0;         insertiontargetchildren.eq(random).after(insertiontemplate);     }      $('.listings').packery({         itemselector: '.item'     }); 

Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -