我无法在一堆其他 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 -->
我在这里做错了什么?