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

时间:2012-06-25 09:26:24

标签: jquery class random element

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

但是,我有一个按钮,应该随机选择一些带有“selectElement”类的元素(例如10个)并给它们“selectedElement”类。

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

编辑:在Jon的帮助下解决了。以下是具有类似问题的其他用户的代码:)

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

3 个答案:

答案 0 :(得分:12)

每当你想从X中随机选择N个元素 时,解决方案就是Fisher-Yates shuffleThis 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部分!

答案 1 :(得分:3)

这样的东西可行(通过点击元素触发它)

$(".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/

答案 2 :(得分:3)

您可以使用jquery方法var len = $(".someClass").length; var random = Math.floor( Math.random() * len ) + 1; $(".someClass").eq(random).css("background-color", "yellow");

按类名选择随机项

见下面的例子。

hasFocus