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

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

3 个答案: