jQuery选择具有相同类的随机元素

Posted 2023-02-25

【中文标题】jQuery选择具有相同类的随机元素

【英文标题】：jQuery select random elements with same class

【发布时间】：2012-06-26 13:10:26

【问题描述】：

我有“selectElement”类的元素。当我单击该类的元素时，我“选择”它，并给它另一个类“selectedElements”，如果它还没有的话。

但是，我有一个按钮，它应该随机选择一定数量（例如 10 个）具有“selectElement”类的元素并给它们“selectedElement”类。

我在这个答案中尝试过类似的东西 -> https://***.com/a/1764629/1011539，但它每次都返回相同的值......

编辑：在乔恩的帮助下解决了。这是其他有类似问题的用户的代码:)

$("#chooseElementsRand").live("click",function()
    $(".selectedElements").removeClass("selectedElements");
    var maxNum = parseInt($(".maxNum").html());
    var randomElements = shuffle($(".selectElement")).slice(0,maxNum).addClass("selectedElements");
    $(".selectedNum").html(randomElements.length);
    if(randomElements.length==maxNum) 
        $(".buttonToProceed").removeClass("notShown");
    
);

【参考方案1】：

您可以使用jquery方法eq()按类名随机选择项目

请看下面的例子。

var len = $(".someClass").length;
var random = Math.floor( Math.random() * len ) + 1;
$(".someClass").eq(random).css("background-color", "yellow");

【讨论】：

这是我最喜欢的答案，因为它不需要访问整个列表，但+ 1 意味着您永远不会获得列表中的第一项。

这很好，我在random 声明之后添加了这一行，以便有机会选择第一项：random = ((Math.random() * 10)+1) > 5 ? random + 1 : random;

【参考方案2】：

这样的事情会起作用（通过点击一个元素来触发它）

$(".selectElement").on("click", function() 
    var randomElements = $(".selectElement").get().sort(function() 
        return Math.round(Math.random()) - 0.5;
    ).slice(0, 5);
    $(randomElements).css('border', '1px solid red');
);​

http://jsfiddle.net/rKFfm/

【参考方案3】：

当你想从 X 中随机选择 N 个元素真的时，解决方案是 Fisher-Yates shuffle。 This page 有一个 javascript 实现（加上基本原理，加上漂亮的动画，所以去看看）：

function shuffle(array) 
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) 

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  

  return array;

鉴于随机播放，您可以随机选择 X 个元素

var items = shuffle($(".selectElement")).slice(0, X);

Here's a working fiddle 一起玩。

脚注：由于您只对一定数量的随机选择感兴趣，因此无需像上面的shuffle 那样无条件地打乱整个输入数组；您可以只洗牌一小部分，然后使用.slice 将其切断并使用它。我将把它留作练习；注意不要误抓*un*shuffled部分！