jQuery select random elements with same class
Solution 1
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!
Solution 2
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");
Solution 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');
});
bosniamaj
Updated on June 30, 2022Comments
-
bosniamaj almost 2 years
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"); } });
-
kichik over 6 yearsThis 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. -
PsychoMantis about 4 yearsThis 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;
-
Avatar almost 2 yearsUseful: function
getRandomInt(min, max)
at stackoverflow.com/a/1527820/1066234