遍历数组中的元素和元素

时间:2012-12-15 20:39:05

标签: jquery arrays for-loop loops each

我想从数组中选择随机产品对象,并将它们包含的信息放在四个不同的容器中。所有容器都是用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>

3 个答案:

答案 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'}]);

DEMO

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;

} );

您可以使用条件或其他内容来记住已插入列表的哪些产品,而不是复制原始数组并删除已使用的产品。这样可以防止列表中多次出现一个产品(因为您随机选择它们)。