选择 5 个随机元素答案

【问题标题】：Select 5 random elements选择 5 个随机元素
【发布时间】：2010-12-18 08:40:24
【问题描述】：

如何选择前 5 个随机元素

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
     ...
    <li>N</li>
</ul>

I'm using this plugin:

alert($("li:random").text());

但它需要所有随机元素。我只想要前 5 个。

还有其他方法可以做同样的事情吗？

【问题讨论】：

你能在前五个服务器端包裹一个 div，然后使用 li #first-five:random 吗？
我不知道 jQuery 支持 ":random" 伪选择器，你如何添加这个功能以及它背后的代码逻辑是什么？
blog.mastykarz.nl/jquery-random-filter 但是如果你可以告诉我另一种方式，如何选择 5 个随机元素，会很棒

标签： javascript jquery

【解决方案1】：

以下是如何从 jQuery 选择中获取 5 个随机元素，无需插件！

randomElements = jQuery("li").get().sort(function(){ 
  return Math.round(Math.random())-0.5
}).slice(0,5)

此时，您已经从 jQuery 返回的所有 LI 中随机选择了 5 个 DomElement

然后你可以对他们做任何你喜欢的事情，
例如改变它们的颜色：

$(randomElements).css("color","red")

或显示它们的组合文本内容：

$(randomElements).text()

【讨论】：

+1，虽然我很好奇为什么您在文本中始终正确地拼写“random”，而在代码 sn-ps 中始终不正确地拼写“random”... :-)
总体思路不错，但您不应该像这样对数组进行洗牌。排序是洗牌数组的一种低效方式，不一致的比较可能会导致问题（甚至可能导致排序无限循环）。最好使用 Fisher-Yates shuffle (en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle)。
这不会给你一个随机排序的数组。这是一篇关于它的文章（它是 Objective-C，但不重要）cocoawithlove.com/2010/06/…
正如 Georg 指出的那样，这不会产生随机集，因为在（快速）对数组进行排序时将使用至少一个枢轴元素（很可能是中间的那个）。 Georg 的链接很好读！投反对票。
这很糟糕。选择 X 个随机元素是 O(1)，而对整个集合进行排序最多需要 O(n log n)。

【解决方案2】：

使用Fisher-Yates shuffle 我为此创建了一个小脚本。这是通过首先创建 jQuery 元素数组的随机打乱和切片副本，然后过滤掉两个数组中不存在的所有元素来完成的。

您可以在http://www.afekenholm.se/jquery-rand 阅读有关它的信息。这是脚本：

/**
 * jQuery.rand v1.0
 * 
 * Randomly filters any number of elements from a jQuery set.
 * 
 * MIT License: @link http://www.afekenholm.se/license.txt
 * 
 * @author: Alexander Wallin (http://www.afekenholm.se)
 * @version: 1.0
 * @url: http://www.afekenholm.se/jquery-rand
 */
(function($){
    $.fn.rand = function(k){
        var b = this,
            n = b.size(),
            k = k ? parseInt(k) : 1;

        // Special cases
        if (k > n) return b.pushStack(b);
        else if (k == 1) return b.filter(":eq(" + Math.floor(Math.random()*n) + ")");

        // Create a randomized copy of the set of elements,
        // using Fisher-Yates sorting
        r = b.get();
        for (var i = 0; i < n - 1; i++) {
            var swap = Math.floor(Math.random() * (n - i)) + i;
            r[swap] = r.splice(i, 1, r[swap])[0];
        }
        r = r.slice(0, k);

        // Finally, filter jQuery stack
        return b.filter(function(i){
            return $.inArray(b.get(i), r) > -1;
        });
    };
})(jQuery);

【讨论】：

【解决方案3】：

获取一个随机数索引，1-5，并获取具有该索引的 ul 的孩子。像这样：

var index = Math.floor(Math.random() * 5) + 1;  // nth-child indices start at 1
alert($("ul:nth-child(" + index + ")").text());

【讨论】：

哦，这完全错了。我把这个问题读成从前五个中请求一个随机元素，而不是从集合中请求五个随机元素。我想我需要睡觉了！ :D
通过精确搜索这种解决方案来到这里。所以回答误读的问题并不总是坏事:)
Math.random() returns a value in [0,1) -- 即包括 0 但不包括 1。因此index 有可能（尽管很少见）为0。为避免这种情况，请使用var index = Math.floor(Math.random() * 5) + 1;。

【解决方案4】：

  jQuery.jQueryRandom = 0;
  jQuery.extend(jQuery.expr[":"], {
    random: function(a, i, m, r) {
      if (i == 0) {
        jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
      };
      return i == jQuery.jQueryRandom;
    }
  });

【讨论】：

【解决方案5】：

$("li:lt(5):random").text()

【讨论】：

但总是需要前 5 个（

【解决方案6】：

为什么不直接这样做，看起来效率很高：

jQuery('li:random').slice(0, 5);

【讨论】：

可能是因为 jQuery 没有:random 选择器[不再]？