Randomly selecting two elements of a given class and hiding all others?

Question

I have a series of elements with the class .random-related. There's a variable amount that will have this class at any given time, but it's around 15 - 20 elements. What I am trying to do is to take two random examples and .hide() the rest.

I'm considering doing something like $('.random-related').toArray(), shuffling that array using a prewritten shuffle function, and then selecting indices 0 and 1. However, I'm not sure how to turn the array back into a set of jQuery objects that I can then traverse and apply any methods to.

What would be the best way to go about this?

score 0 · Answer 1 · answered Feb 05 '18 at 19:44

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

Ele · Answer 2 · 2018-02-05T20:59:12.683

Use the jquery built-int selectors eq and not along with two random indexes.

Look at this code snippet

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>

Randomly selecting two elements of a given class and hiding all others?

2 Answers2

Look at this code snippet

Resources