插入图像 - 未捕获RangeError:最大调用堆栈大小超过

时间:2015-08-02 19:20:42

标签: javascript jquery

Insert randomly but never next to each otherhttp://jsfiddle.net/ny1mc9kw/)扩展已接受的答案 - 有人知道我为什么会这样做:

Uncaught RangeError: Maximum call stack size exceeded
jQuery.fn.jQuery.get @ jquery.self.js?body=1:118
jQuery.fn.extend.add @ jquery.self.js?body=1:2947
getElems @ self.js?body=1:13

我在Ruby on Rails应用程序中在Chrome中遇到此错误,但不幸的是我无法在小提琴中重现它。

// https://stackoverflow.com/questions/17238255/insert-a-div-in-a-random-location-in-a-list-of-divs

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();
        }
    }
    getElems();

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


$('.main').packery({
    itemSelector: '.image'
});
* {
    margin: 0;
    padding: 0;
}
span {
    font-family: Monospace;
    padding: 0 5px;
    color: #666;
    background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<h2>Randomly insert <span>insertionTemplate</span> into <span>insertionTarget</span> N times (<span>insertionFrequency</span>)</h2>

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

0 个答案:

没有答案