One approach I'd suggest is the use of a simple plugin:
(function($) {
// naming the new plugin ('getRandom'):
$.fn.getRandom = function(n) {
// creating an Array by passing the jQuery collection
// the 'this' passed to the function to the get()
// method, which takes the passed-in collection
// and returns a jQuery Array:
var collection = this.get(),
// creating an Array, using an Array-literal:
result = [],
// initialising a variable for use, later:
rand;
// converting the passed-in argument, 'n', into a
// base-10 ('10') Number, using parseInt() (this
// does no harm if 'n' is already a Number, but
// ensures that, if a String is passed in ('3' for
// example) we get a Number back out:
n = parseInt(n, 10);
// while n is still truthy (so non-zero):
while (n) {
// we generate a random number in the range of
// 0 to the length of the collection Array:
rand = Math.floor(Math.random() * collection.length);
// we use the random number as an index, and
// push the Array-element at that index in the
// collection Array into the result Array:
result.push(collection[rand]);
// we then remove the element at that index from the
// collection Array, passing in the same index ('rand')
// and deleting one element ('1'):
collection.splice(rand, 1);
// decrement the n variable:
n--;
}
// convert the result Array of elements back into
// object, and return that object to the calling
// context for chaining:
return $(result);
}
})(jQuery);
(function($) {
$.fn.getRandom = function(n) {
var collection = this.get(),
result = [],
rand;
n = parseInt(n, 10);
while (n) {
rand = Math.floor(Math.random() * collection.length);
result.push(collection[rand]);
collection.splice(rand, 1);
n--;
}
return $(result);
}
})(jQuery);
$('.className').getRandom(10).css({
'opacity': '0.2'
})
.className {
display: inline-block;
width: 3em;
height: 3em;
box-sizing: border-box;
border: 2px solid #000;
text-align: center;
overflow: hidden;
counter-increment: boxCounter;
position: relative;
}
.className::after {
content: counter(boxCounter, decimal-leading-zero);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
JS Fiddle demo.
As most of the jQuery plugin above is written in plain JavaScript this is, of course, similarly easily-possible in plain JavaScript, albeit as a function, rather than a method or prototype-extension (although, if you wish to do it that way, it remains easily-possible to do so, albeit not necessarily advised):
function getRandomFrom(haystack, n) {
// ensuring that we have an Array, assuming we're
// passed an Array-like Object (such as a NodeList,
// HTMLCollection or, even, an Array):
haystack = Array.from(haystack);
// ensuring that the variable n is a Number, using
// parseInt():
n = parseInt(n, 10);
// creating an empty Array:
var result = [],
// initialising a variable for later use:
rand;
// while n is truthy (non-zero):
while (n) {
// we generate a random number between 0 and
// the Array-length:
rand = Math.floor(Math.random() * haystack.length);
// we use the random number as an index for the Array,
// and push the Array-element held at that index to the
// result Array:
result.push(haystack[rand]);
// we remove that Array-element from the Array, using
// Array.prototype.splice():
haystack.splice(rand, 1);
// decrement n, to ensure we don't have an infinite
// while loop:
n--;
}
// return the result Array to the calling context:
return result;
}
function getRandomFrom(haystack, n) {
haystack = Array.from(haystack);
n = parseInt(n, 10);
var result = [],
rand;
while (n) {
rand = Math.floor(Math.random() * haystack.length);
result.push(haystack[rand]);
haystack.splice(rand, 1);
n--;
}
return result;
}
var elems = document.querySelectorAll('.className');
getRandomFrom(elems, 5).forEach(el => el.classList.add('selected'));
.className {
display: inline-block;
width: 3em;
height: 3em;
box-sizing: border-box;
border: 2px solid #000;
text-align: center;
overflow: hidden;
counter-increment: boxCounter;
position: relative;
}
.className::after {
content: counter(boxCounter, decimal-leading-zero);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #fff;
}
.className.selected {
opacity: 0.25;
border-color: red;
}
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
<div class="className">CONTENT</div>
References:
Bibliography:
