如何使用 jquery 显示 3 个随机列表项？答案

【问题标题】：How to show 3 random item of list using jquery?如何使用 jquery 显示 3 个随机列表项？
【发布时间】：2017-01-19 03:29:21
【问题描述】：

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

到目前为止，我所做的是这样，但它并没有真正做到我想要实现的所有目标，我只显示了 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]);
}

有人可以帮助我吗？谢谢

【问题讨论】：

请发minimal reproducible example
这是我的 jsfiddle - jsfiddle.net/ehek5pq5

标签： javascript jquery html list random

【解决方案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) 循环。

【讨论】：

是的，它完全符合我的要求。非常感谢

【解决方案2】：

首先隐藏所有项目。然后生成 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>

【讨论】：

【解决方案3】：

试试这个简单的答案，很简单，这里是工作演示

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

注意：在这里，length(ul 中的元素数量) 应该是一个可以不为 3 的数字，因为您希望每次显示 3 个

【讨论】：