遍歷數組中的元素和元素

Question

我想從數組中挑選隨機產品對象，並將它們包含的信息放在四個不同的容器中。所有的容器在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> 

Answer 1

如果您想選擇隨機的產品並將其放置在每個容器沒有重複，你必須先洗牌數組：

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。 好的，你現在已經修復了:)

Answer 2

你在找這樣的嗎？

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

Answer 3

當您已經使用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; 

}); 

，而不要照搬原來的陣列和刪除使用過的產品，你可以使用一個條件什麼的，記住這已經插入列表中的產品。這應該防止列表中出現多個產品（因爲您正在隨機選擇它們）。