在jQuery中选择5个随机列表项作为数组

Question

我想要一个按钮，可以从 jQuery 中未排序的 HTML 列表中随机选择 5 个列表项。我还想确保该函数首先确保如果有 5 个或更少的列表项，它将简单地选择所有可用的列表项。另外，我想确保随机 5 在其数组中没有重复项。另外，假设有 28 个列表项，我希望它随机选择 5 个尚未选择的项，因为您可以多次单击该按钮。所以基本上我想随机选择 5 个，直到整个列表都被选中。这是我目前所拥有的。

<ul id="masterlist">
    <li><a href="http://www.example1.com" target="_blank">Example 1</a></li>
    <li><a href="http://www.example2.com" target="_blank">Example 2</a></li>
    <li><a href="http://www.example3.com" target="_blank">Example 3</a></li>
    <li><a href="http://www.example4.com" target="_blank">Example 4</a></li>
    <li><a href="http://www.example5.com" target="_blank">Example 5</a></li>
    <li><a href="http://www.example6.com" target="_blank">Example 6</a></li>
    <li><a href="http://www.example7.com" target="_blank">Example 7</a></li>
    <li><a href="http://www.example8.com" target="_blank">Example 8</a></li>
    <li><a href="http://www.example9.com" target="_blank">Example 9</a></li>
</ul>
<button id="openfiverandom">Open 5 Random</button>

<script type="text/javascript">
    $(function() {
        $('#openfiverandom').bind('click', function(event) {
            var links = $('#masterlist li a');
            var len = links.length;
            if (len <= 5) {
                $('#masterlist li a').each( function() { this.click(); })
            }
            else {
                while(links.length > 5) {
                    links.eq(parseInt(len * Math.random())).hide();
                }
                links.each( function() { this.click(); })
            }
        });
    });
</script>

它不起作用，也不检查重复项。我希望在stackoverflow上找到更好的解决方案。还要记住链接有 target="_blank" 这意味着它们仍然会全部打开，它不会在第一个停止，因为它不会转发当前页面。我还在想，简单地随机化主列表数组，然后对前五个进行切片可能会更容易。不过不知道该怎么做。

Answer 1

试试

$(function () {
    $('#openfiverandom').bind('click', function (event) {
        var links = $('#masterlist li a'),
            len = links.length,
            random, i, $a;
        if (len <= 5) {
            links.click();
        } else {
            for (i = 0; i < 5; i++) {
                random = Math.floor(Math.random() * links.length);
                $a = links.eq(random).click();
                links = links.not($a)
            }
        }
    });
});

PoC：Fiddle

注意：触发手动点击事件不会打开新窗口，因为浏览器可能不会调用原生点击处理程序

Answer 2

您可以手动构建过滤后的 jQuery 实例，如下所示：

$('#openfiverandom').bind('click', function (event) {
    var links = $('#masterlist li a').show();
    var len = links.length;

    var $filtered = $(); //create a new jQuery object we're going to fill
    var $random;
    while ($filtered.length < 5 || $filtered.length !== links.length) {
        $random = links.eq(Math.round(Math.random() * 10);
        if(!$filtered.contains($random)) $filtered.push($random); //grab some random element from links
    }
    $filtered.click();
});

编辑，在回家的路上想了更多，并想到了一个更好的解决方案（这不是真正随机的）（如果需要，您可以稍微简化一些）：

 $('#openfiverandom').bind('click', function (event) {
    var links = $('#masterlist li a').show();

    var added = 0;
    var $filtered = links.filter(function() {
        if(added >= 5) return false;
        return (links.length - added < 5 || Math.round(Math.random())) && ++added; //++added is going to be truthy
    });
    $filtered.click();
});

Answer 3

这解决了我在使用此功能时遇到的主要问题。到目前为止，它只能在 Firefox 中按需要工作。它还没有所有的花里胡哨，但它确实打开了 5 个随机链接。最好的方法最终是对列表进行洗牌，然后将其切成前 5 个，就像我在最初的帖子中提到的那样。如果你们有任何问题，请告诉我。

jQuery(function ($) {
    $.fn.shuffle = function() {
        return this.each(function(){
            var items = $(this).children().clone(true);
            return (items.length) ? $(this).html($.shuffle(items)) : this;
        });
    }

    $.shuffle = function(arr) {
        for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
        return arr;
    }

    $('#openfiverandom').bind('click', function (event) {
        var links = $.shuffle($('#masterlist li a')).slice(0, 5);
        links.each(function () { this.click(); });
    });
});