从选择中显示特定数量的随机对象并使用 js/jQuery 隐藏所有其他对象？

Question

到目前为止我所做的是：

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

用法：

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

问题是我会运行不时选择 while 中已经显示的 (show()) 项目。我很乐意消除不必要的开销。

遗憾的是，似乎无法从缓存选择中删除对象。 remove() 还从 DOM 中删除了不是（总是）我想要的对象。

首先克隆对象选择然后使用 remove() 将适用于选择过程，但实际上 [=13] 将所选项目与实时 DOM 匹配会产生开销=]他们。

Answer 1

我的建议是先创建一个唯一的随机数组。隐藏所有元素然后遍历随机索引数组并显示匹配元素

// 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

从选择中显示特定数量的随机对象并使用 js/jQuery 隐藏所有其他对象？

Show a specific number of random objects from a selection and hide all others with js/jQuery?

javascript

jquery

jquery-selectors