遍历数组中的元素和元素

Posted 2023-05-09

【中文标题】遍历数组中的元素和元素

【英文标题】：Iterate through elements and elements in array

【发布时间】：2012-12-03 11:26:22

【问题描述】：

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

【问题讨论】：

嗯，代码做了你所描述的，不是吗？或者您想挑选四种不同的物品并将它们分别放入其中一个容器中？

$('.products') 中的选择器不会选择任何内容，因为您的 HTML 示例中没有 products 类。

【参考方案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。好的，你现在已经解决了:)

【讨论】：

Feeela 的解决方案有效，除了您指出的事实，您的解决方案解决了这一点。非常感谢！

@holyredbeard 不客气！如果您有任何问题，请告诉我。

【参考方案2】：

当你已经在使用 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;

 );

您可以使用条件或其他东西来记住列表中已插入的产品，而不是复制原始数组并删除使用过的产品。这应该可以防止列表中多次出现一种产品（因为您是随机选择它们）。

【讨论】：

@holyredbeard 这并不总是使用您传递的所有产品。

@Jack 如果你只有四个盒子，却有五十个产品，怎么可能？或者你是什么意思？

@feeela 请参阅this jsbin 了解我的意思。它只使用四种产品，并且使用您的代码通常不会填满所有容器。

@Jack 我明白了。不要考虑将随机数加倍或检查请求的元素在该数组位置是否可用。

【参考方案3】：

你在寻找这样的东西吗？

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

【讨论】：

感谢您的回答！我尝试了代码，但没有成功。我想做的是将四个随机产品（及其数据）放在四个不同的容器中。不应该是 $('.producers').eq...顺便说一句吗？

试试我的更新版本，我有点搞砸了我的复制和粘贴