在Insert randomly but never next to each other(http://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>