SO-40663796

by David Thomas

HTML

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

CSS

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

JavaScript

(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'
})