Eine bestimmte Anzahl von zufälligen Objekten aus einer Auswahl anzeigen und alle anderen mit js/jQuery ausblenden?

Question

Was ich bisher tat, war folgendes:

function randomSelectObjects(randObjects, countShow){ 
    var i = 0; 
    var countRandObjects = randObjects.length; 
    var preselectedObj = false; 
    randObjects.hide(); // hide all items 
    while (i < countShow) { // while until we found enough items we can show 
     preselectedObj = randObjects.eq(Math.floor(Math.random()*countRandObjects)); // random select an object 
     if(preselectedObj.is(':hidden')){ // make sure it is not already unhidden 
      preselectedObj.show(); // show the object 
      i++; // up the counter – done only in case it was not already visible 
     } 
    } 
} 

Verbrauch:

var randObjects = $('.items'); 
randomSelectObjects(randObjects, 1); 

Das Problem ist, dass ich in der Auswahl eines bereits aufgedeckt (show()) Artikel innerhalb while von Zeit zu Zeit ausgeführt wird. Ich würde gerne diesen unnötigen Overhead entfernen.

Leider scheint es keine Möglichkeit zu geben, ein Objekt aus einer zwischengespeicherten Auswahl zu entfernen. remove() entfernt auch das Objekt aus dem DOM, das ist nicht (immer) was ich will.

Klonen die Auswahl der Objekte zuerst und dann mit remove() würde für den Auswahlprozess funktionieren, aber dann würde es den Aufwand geben, die ausgewählten Elemente mit dem Live-DOM für tatsächlich show() ihnen zu entsprechen.

Answer 1

Mein Vorschlag ist zuerst ein einzigartiges zufälliges Array zu erstellen. Wie bitte Elemente dann die Schleife durch das Array von Zufall inidices und zeigen passende Elemente

// wrap in simple jQuery plugin 
$.fn.randomDisplay = function(max_items) { 
    max_items = max_items || 5; 
    //create array of unique random indices 
    var randArr = randArray(this.length, max_items); 
    // hide all then filter matches to show 
    this.hide().filter(function(i){ 
    return randArr.indexOf(i) >-1 
    }).show(); 

    // creates unique array 
    function randArray(max, len) { 
    var arr = [], rand; 
    for (var i = 0; i < len; i++) { 
     rand = getRand(max) 
     while (arr.indexOf(rand) > -1) { 
     rand = getRand(max) 
     } 
     arr.push(rand); 
    } 
    return arr; 
    } 
    // random number helper 
    function getRand(max) { 
    return Math.floor(Math.random() * max) 
    } 

} 

// use 
$(function(){ 
    $('.item').randomDisplay(7) 
}) 

DEMO