5

I have elements with class "selectElement". When I click on element with that class, I "select" it, and give it another class "selectedElements", if it doesn't already have it.

But, I have a button that should randomly select certain number (e.g. 10) of elements with class "selectElement" and give them the "selectedElement" class.

I tried something like in this answer -> https://stackoverflow.com/a/1764629/1011539, but it returns same values every time...

EDIT: Solved with Jon's help. Here is the code for other users with similar problem :)

$("#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"); } });
Improve this question
0

3 Answers 3

Reset to default
18

Whenever you want to pick N elements really at random out of X, the solution is the Fisher-Yates shuffle. This page has a Javascript implementation (plus rationale, plus nice animations, so go have a look):

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

Given the shuffle, you can then pick X elements at random with

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

Here's a working fiddle to play with.

Footnote: since you are only interested in a certain amount of random picks, there's no need to unconditionally shuffle the whole input array as shuffle does above; you could shuffle only a small part and then use .slice to cut it off and work with it. I 'm leaving this as an exercise; be careful that you don't grab the *un*shuffled part by mistake!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

9

You can select random item by class name using jquery method eq()

see the example bellow.

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

3 Comments

This is my favorite answer here because it doesn't require accessing the entire list, but the + 1 means you'll never get the first item in the list.
This is nice, I added this line after the random declaration to allow a chance to select the first item: random = ((Math.random() * 10)+1) > 5 ? random + 1 : random;
Useful: function getRandomInt(min, max) at stackoverflow.com/a/1527820/1066234
3

Something like this would work (Trigger it by clicking on an element)

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.