如何使用jQuery显示列表的3个随机项？

Question

I have a big list <li> of items and a button to "shuffle" the list, what I'm trying to achieve is, show only 3 RANDOM list items when the page loads, then on button click, shuffle the list, hide the current 3 list items and show OTHER RANDOM list items. 我有一个很大的项目列表<li>和一个“随机播放”列表的按钮，我要实现的是，页面加载时仅显示3个RANDOM列表项目，然后单击按钮，随机播放列表，隐藏当前的3个列表项，并显示OTHER RANDOM个列表项。

What I did till now is this, but it doesn't really do everything I'm trying to achieve, I get 3 items showed only, but they get randomised between the same 3 list items always... 到现在为止我所做的就是这个，但是它并没有真正完成我想要达到的所有目的，我只显示了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]);
}

Can somebody help me please. 有人可以帮我吗。 Thank you 谢谢

Answer 1

Try something like this 试试这个

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

You need to have six or more <li> elements, otherwise it will be an infinite while (true) loop. 您需要具有六个或更多的<li>元素，否则它将是一个无限的while (true)循环。

Answer 2

try this simple answer, it is very easy and here is the working demo 试试这个简单的答案，这很容易，这是工作示例

 <html> <head></head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style type="text/css"> </style> <body> <input type="button" value="click to shuffle" id="shuffle"> <ul class="mylist"> <li id="id1">one</li> <li id="id2">two</li> <li id="id3">three</li> <li id="id4">four</li> <li id="id5">five</li> <li id="id6">six</li> <li id="id7">seven</li> <li id="id8">eight</li> <li id="id9">nine</li> <li id="id10">ten</li> <li id="id11">eleven</li> <li id="id12">twelve</li> </ul> </body> <script type="text/javascript"> $(document).ready(function(){ $("ul.mylist li").slice(3).hide(); var theCount = 3; $("#shuffle").click(function(){ $("ul.mylist li").hide(); var theLength = $("ul.mylist li").length; if(theCount == theLength) { theCount = 3; } else { theCount = theCount + 3; } $("ul.mylist li").slice(theCount-3,theCount).show(); }); }); </script> </html>

note: in here, length(number of elements inside the ul) should be a number which can devide from 3, because you want to show 3 per time 注意：在这里，length（ul内的元素数）应该是一个可以从3开始的数，因为您希望每次显示3

Answer 3

Hide all items at first. 首先隐藏所有项目。 Then generate 3 random number and select item with index using .eq() and show selected items. 然后生成3个随机数，并使用.eq()选择具有索引的项目并显示所选项目。

 $(".fr_revs > li").hide(); randomItem(); $("button").click(function(){ var lastItems = $(".fr_revs > li:visible"); randomItem(); lastItems.hide(); }); function randomItem(){ for (var i = 0; i < 3; i++){ var length = $(".fr_revs > li:not(:visible)").length; var random = Math.floor(Math.random() * length); $(".fr_revs > li:not(:visible)").eq(random).show(); } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Get new</button> <ul class="fr_revs"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> <li>K</li> <li>L</li> <li>M</li> <li>N</li> <li>O</li> </ul>

如何使用jQuery显示列表的3个随机项？

问题描述

3 个解决方案

解决方案1
4 已采纳 2016-09-11 15:43:51

解决方案2
0 2016-09-11 15:53:32

解决方案3
0 2016-09-12 07:03:32

如何使用jQuery显示列表的3个随机项？

问题描述

3 个解决方案

解决方案1 4 已采纳 2016-09-11 15:43:51

解决方案2 0 2016-09-11 15:53:32

解决方案3 0 2016-09-12 07:03:32

解决方案1
4 已采纳 2016-09-11 15:43:51

解决方案2
0 2016-09-11 15:53:32

解决方案3
0 2016-09-12 07:03:32