我想从数组中选择随机产品对象,并将它们包含的信息放在四个不同的容器中。所有容器都是用html进行硬编码的,并且具有相同的类名,我想迭代它们。
下面你看到代码,我正在使用.each执行此任务,当然这不起作用,因为每次for循环运行时它都会重新开始。
那么,解决这个问题的最佳方法是什么?
function AddProducts(products) {
for(var i = 0; i < 4; i++) {
var number = Math.floor(Math.random() * products.length);
$('.product').each(function(index) {
$(this).find('h3').html(product[number].name);
});
}
}
<div class="row span12">
<ul class="thumbnails">
<li class="span3 product">
<div class="thumbnail padding">
<h3>Product name</h3>
<p>Description</p>
</div>
</li>
<li class="span3 product">
<div class="thumbnail padding">
<h3>Product name</h3>
<p>Description</p>
</div>
</li>
<li class="span3 product">
<div class="thumbnail padding">
<h3>Product name</h3>
<p>Description</p>
</div>
</li>
<li class="span3 product">
<div class="thumbnail padding">
<h3>Product name</h3>
<p>Description</p>
</div>
</li>
</ul>
</div>
答案 0 :(得分:2)
如果你想挑选随机产品并将它们放入每个容器而不重复,你必须首先洗牌:
function shuffle(o)
{ //v1.0
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
function AddProducts(products)
{
// this function modifies the array in-place
// make a copy if you need to
// products = shuffle(products.slice(0));
shuffle(products);
$('.product').each(function(i) {
if (products[i]) {
$(this).find('h3').html(products[i].name);
}
});
}
AddProducts([{name: 'foo'}, {name: 'bar'}, {name: 'baz'}, {name: 'dude'}]);
shuffle()
功能取自此问题:How can I shuffle an array?
此外,您的好的,您现在已经解决了这个问题:)<li>
个元素之一有错误的类.producer
而不是.product
。
答案 1 :(得分:1)
你在找这样的东西吗?
function AddProducts(products) {
var selectedProducts = [];
var producers = $('.producer');
for(var i = 0; i < 4; i++) {
var number = Math.floor(Math.random() * products.length);
producers.eq(i).find('h3').html(product[number].name);
}
}
答案 2 :(得分:1)
在使用jQuery .each()
函数时,您不需要for循环。
var productTmp = product.slice(0);
$( '.product' ).each( function( index ) {
var number = Math.floor( Math.random() * productTmp.length );
$( this ).find( 'h3' ).html( productTmp[number].name );
productTmp[number] = undefined;
} );
您可以使用条件或其他内容来记住已插入列表的哪些产品,而不是复制原始数组并删除已使用的产品。这样可以防止列表中多次出现一个产品(因为您随机选择它们)。