如何使用jquery显示列表中的3个随机项目？

Question

我有一个大的<li>项目列表和一个用于“随机播放”列表的按钮，我想要实现的是，在页面加载时仅显示 3 个随机列表项目，然后单击按钮，随机播放列表，隐藏当前的 3 个项目列出项目并显示其他随机列表项目。

到目前为止我所做的是这样的，但它并没有真正完成我想要实现的所有目标，我只显示了 3 个项目，但它们总是在相同的 3 个列表项目之间随机化......

$('.fr_revs > li').hide().filter(':lt(3)').show();

var ul = document.querySelector('.fr_revs');
for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
}

有人可以帮我吗？谢谢

Answer 1

尝试这样的事情

var ul = $('ul'),
    lis = ul.find('li').detach(),
    button = $('#shuffle'),
    used = [];

function showRandom() {
    var new_lis = [];
    while (true) {
      var li = lis[Math.floor(Math.random() * lis.length)];
      if (used.indexOf(li) === -1 && new_lis.indexOf(li) === -1) new_lis.push(li);
      if (new_lis.length >= 3) break;
    }
    used = new_lis;
    ul.html(new_lis);
}

button.click(showRandom);
showRandom();

您需要有六个或更多<li>元素，否则将是无限while (true)循环。