1

配列からランダムな製品オブジェクトを選択し、それらに含まれる情報を 4 つの異なるコンテナーに配置したいと考えています。すべてのコンテナーは 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>
4

3 に答える 3

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>要素の 1 つに、.producerではなく間違ったクラスがあり.productます。さて、あなたは今それを修正しました:)

于 2012-12-15T21:03:44.437 に答える
1

.each()すでにjQuery関数を使用している場合は、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;

} );

元の配列をコピーして使用済みの製品を削除する代わりに、条件などを使用して、リストのどの製品がすでに挿入されているかを記憶することができます。これにより、リスト内で1つの製品が複数回発生するのを防ぐことができます（ランダムに選択しているため）。

于 2012-12-15T20:51:44.553 に答える
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);
    }
}
于 2012-12-15T20:41:47.163 に答える