【问题标题】：Randomly selecting two elements of a given class and hiding all others? [duplicate]随机选择给定类的两个元素并隐藏所有其他元素？ [复制]
【发布时间】：2018-02-05 19:32:18
【问题描述】：

我有一系列带有.random-related 类的元素。在任何给定时间都会有这个类的数量可变，但它大约有 15 到 20 个元素。我想做的是随机抽取两个例子，其余的都是.hide()。

我正在考虑执行$('.random-related').toArray() 之类的操作，使用预先编写的随机播放函数对该数组进行随机播放，然后选择索引 0 和 1。但是，我不确定如何将数组转回一组 jQuery 对象然后我可以遍历并应用任何方法。

最好的方法是什么？

【问题讨论】：

标签： javascript jquery random

【解决方案1】：

使用How can I shuffle an array?

function shuffle(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a
}
var randomRelated = shuffle($('.random-related').toArray()); 

randomRelated.forEach(element => {
	
  if(randomRelated.indexOf(element) == 0 ||  randomRelated.indexOf(element) == 1 ){
  return 
  }
  element.style.display = 'none'

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="random-related">1</p>
<p class="random-related">2</p>
<p class="random-related">3</p>
<p class="random-related">4</p>
<p class="random-related">5</p>
<p class="random-related">6</p>
<p class="random-related">7</p>
<p class="random-related">8</p>
<p class="random-related">9</p>
<p class="random-related">10</p>

【讨论】：

【解决方案2】：

使用 jquery 内置的选择器 eq 和 not 以及两个随机索引。

看这段代码sn-p

var randomize = function(howMany) {
  var a = Math.floor(Math.random() * howMany),
    b;
    
  do {
    b = Math.floor(Math.random() * howMany);
  } while (b === a);

  var max = Math.max(a, b);
  var min = Math.min(a, b);

  var $selection2Hide = $('#wrapper div:not(.random-related:eq(' + (min - 1) + '), .random-related:eq(' + (max - 1) + '))');
  $selection2Hide.hide();

  var $selection = $('#wrapper div.random-related:eq(' + (min - 1) + '), div.random-related:eq(' + (max - 1) + ')');
  $selection.each(function() {
    console.log('Do stuff with = ' + $(this).html());
  });
};

randomize($('.random-related').size());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='wrapper'>
  <div class='random-related'>1</div>
  <div class='random-related'>2</div>
  <div class='random-related'>3</div>
  <div class='random-related'>4</div>
  <div class='random-related'>5</div>
  <div class='random-related'>6</div>
  <div class='random-related'>7</div>
  <div class='random-related'>8</div>
  <div class='random-related'>9</div>
  <div class='random-related'>10</div>
  <div class='random-related'>11</div>
  <div class='random-related'>12</div>
  <div class='random-related'>13</div>
  <div class='random-related'>14</div>
  <div class='random-related'>15</div>
</div>

资源

【讨论】：