随机插入但永远不会彼此相邻 [英] Insert randomly but never next to each other

问题描述

基于插入div在div列表中的随机位置 - 我试图将一些猫照片随机插入到一张非猫照片中：

Based on Insert a div in a random location in a list of divs -- I'm trying to randomly insert some cat photos into a div of non-cat photos:

< a href =http://jsfiddle.net/frank_o/QXdL3/21/ =nofollow noreferrer> http://jsfiddle.net/frank_o/QXdL3/21/

但有没有办法阻止猫依次出现在彼此旁边？它们应该分散开来。

JS：

var insertionTemplate = $('.template').find('.image').html(),
    insertionTargetChildren = $('.main').find('.image'),
    insertionFrequency = 3;

var random;
for (var i = 0; i < insertionFrequency; i++) {
    random = Math.floor(Math.random() * insertionTargetChildren.length) + 0;
    insertionTargetChildren.eq(random).append(insertionTemplate);
}

HTML：

<div class="template" style="display: none;">
    <div class="image">
        <img src="http://placekitten.com/75/150" />
    </div>
</div>
<div class="main">
    <div class="image">
        <img src="http://lorempixel.com/75/150" />
    </div>

    <!-- ... -->

</div>

推荐答案

我已经解决了问题并做了检查看看下一个或上一个元素是否是猫。

I've fixed the issues and made a check to see if the next or previous element is a cat.

var target    = $('.main').find('.image'),
    frequency = 3,
    element   = $();

for (var i = 0; i < frequency; i++) {
    (function getElems() {
        element   = target.eq( Math.floor(Math.random() * target.length) );
        var next  = element.next(),
            prev  = element.prev(),
            all   = element.add(next, prev);

        if (element.hasClass('cat') || next.hasClass('cat') || prev.hasClass('cat')) getElems();
    }());

    var template  = $('.template div').clone(true);
    element.before(template);
}

FIDDLE

这篇关于随机插入但永远不会彼此相邻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！