JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<div class="box"><div class="headerbox">Personali värbamisest</div><div class="lastnews"><span>11:48</span><a href="article/2015/4/27/fotod-bigbanki-uus-moodne-ja-manguline-kontor" ref="pubid=9A5E779E-92EC-4181-8541-49CBEEBEAC91&amp;stype=Article&amp;pn=Column1&amp;pos=21&amp;sid=bb679f1d-923f-4f89-bfd8-2face413ce0c">FOTOD: Bigbanki uus, moodne ja&nbsp;mänguline kontor</a></div><div class="lastnews"><span>09:28</span><a href="article/2015/4/27/teeme-ara-talgupaevale-meeskonnatunnet-tugevdama" ref="pubid=445652B3-8BAB-49E4-8711-B6B691120E77&amp;stype=Article&amp;pn=Column1&amp;pos=21&amp;sid=bb679f1d-923f-4f89-bfd8-2face413ce0c">Teeme Ära talgupäevale meeskonnatunnet tugevdama</a></div><div class="lastnews"><span>24.04</span><a href="article/2015/4/24/aripaeva-raamatuklubi-soovitab-juht-kui-treener" ref="pubid=D6DDB0BD-859F-4C92-82BF-50C766EC52C5&amp;stype=Article&amp;pn=Column1&amp;pos=21&amp;sid=bb679f1d-923f-4f89-bfd8-2face413ce0c">Äripäeva raamatuklubi soovitab: Juht kui treener</a></div><div class="line"><!----></div><div class="linkall"><span class="icon"><img alt="" src="http://www.sekretar.ee/gfx/ul.gif"><img alt="" src="http://www.sekretar.ee/gfx/ul.gif"></span><span><a href="http://www.sekretar.ee/personalivarbamisest">Kõik artiklid</a></span></div></div>

CSS

.box {
  padding: 0px 1px 2px 0px;
  background-color: #F2F2F4;
  margin-bottom: 5px;
}table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}
user agent stylesheetdiv {
  display: block;
}body {
  padding: 0px;
  margin: 0px;
  font-family: Arial;
  font-size: 12px;
  background-color: #2AB2E2;
  height: 100%;
}
.lastnews a {
  font-family: Arial;
  font-size: 13px;
  font-weight: bold;
}
a {
  color: Black;
  text-decoration: none;
}
.lastnews span {
  display: none;
}
.headerbox {
  background-repeat: no-repeat;
  height: 100%;
  color: #2AB2E2;
  font-size: 17px;
  padding: 7px 0 6px 13px;
  font-weight: bold;
}
.linkall a {
  font-weight: bold;
  color: #777777;
  font-size: 13px;
}
div {
  display: block;
}
table {
  border: 0px solid;
  border-spacing: 0px;
  border-collapse: collapse;
}
.column1 .box {
  padding: 0px 1px 2px 0px;
  background-color: #F2F2F4;
  margin-bottom: 5px;
}.headerbox {
  background-repeat: no-repeat;
  height: 100%;
  color: #2AB2E2;
  font-size: 17px;
  padding: 7px 0 6px 13px;
  font-weight: bold;
}.lastnews a {
  font-family: Arial;
  font-size: 13px;
  font-weight: bold;
}
a {
  color: Black;
  text-decoration: none;
}.lastnews {
  padding: 3px 5px 7px 9px;
  font-family: Arial;
  border-left: 3px solid White;
}.linkall .icon {
  padding: 5px 3px 3px 5px;
}

JavaScript

function fisherYates ( myArray,stop_count ) {
  var i = myArray.length;
  if ( i == 0 ) return false;
  var c = 0;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
     c++;
     if(c == stop_count)return;
   }
}
function getRandomSelection( nr_items ){
    var selectionSize=2;
    var arr = [];
    for(var i=0;i<nr_items;i++){
        arr.push(i);
    }
    fisherYates(arr,Math.min(nr_items, selectionSize));
    return arr.slice(0,selectionSize);;
}
var dataelement = $( "div.box > div.headerbox:contains('Personali värbamisest')" ).parent();
var selection = getRandomSelection($(dataelement).find("div.lastnews").length);
$(dataelement).find("div.lastnews").each(function( index ) {
    if($.inArray(index, selection)>-1){
        $(this).show();
    }else{
        $(this).hide();
    }
});
console.log("Showing items : " + selection);