dinámicamente - jQuery selecciona elementos aleatorios con la misma clase

capturar eventos jquery

Question

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 debe seleccionar al azar cierto número (por ejemplo, 10) de elementos con la clase "selectElement" y darles la clase "selectedElement".

Intenté algo parecido 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 problemas similares :)

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

Answer 1

Algo así podría funcionar (Dispararlo 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/

Answer 2

Cuando quiera elegir N elementos realmente al azar de X, la solución es la mezcla de Fisher-Yates . Esta página tiene una implementación de Javascript (más racional, además de agradables animaciones, así que eche 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;
}

Dada la mezcla, puedes elegir X elementos al azar con

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

Aquí hay un violín con el que jugar.

Nota: dado que solo está interesado en una cierta cantidad de selecciones aleatorias, no es necesario mezclar incondicionalmente toda la matriz de entrada como lo hace la shuffle anterior; puedes mezclar solo una pequeña parte y luego usar .slice para cortarlo y trabajar con él. Dejo esto como un ejercicio; ¡tenga cuidado de no agarrar la parte revuelta * un * por error!

Answer 3

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

mira el ejemplo a continuación.

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