jQuery selecciona elementos aleatorios con la misma clase

Tengo elementos con clase “selectElement”. Cuando hago clic en el elemento con esa clase, lo “selecciono” y le doy otra clase “selectedElements”, si aún no lo tiene.

Pero tengo un botón que debería seleccionar aleatoriamente cierto número (por ejemplo, 10) de elementos con la clase “selectElement” y darles la clase “selectedElement”.

Intenté algo como en esta respuesta -> https://stackoverflow.com/a/1764629/1011539 , pero devuelve los mismos valores cada vez …

EDIT: resuelto con la ayuda de Jon. Aquí está el código para otros usuarios con problema similar 🙂

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

Cuando quieras elegir N elementos realmente al azar de X, la solución es la mezcla aleatoria de Fisher-Yates . Esta página tiene una implementación de Javascript (más la justificación, además de bonitas animaciones, así que ve y echa un vistazo):

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

Dado el orden aleatorio, puedes elegir X elementos al azar con

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

Aquí hay un violín de trabajo para jugar.

Nota al pie: como solo estás interesado en una cierta cantidad de selecciones aleatorias, no es necesario mezclar incondicionalmente toda la matriz de entrada como lo hace la orden shuffle anterior; podría mezclar solo una pequeña parte y luego usar .slice para cortarla y trabajar con ella. Voy a dejar esto como un ejercicio; ¡Tenga cuidado de no agarrar la parte * un * barajada por error!

Algo como esto funcionaría (Actívalo haciendo clic en un elemento)

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

Puede seleccionar un elemento aleatorio por nombre de clase usando el método jquery eq()

Vea el ejemplo abajo.

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