Show Random Set From A List (Function)
HTML
<ul id="digits">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<p id="letters">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>G</span>
<span>H</span>
<span>I</span>
<span>J</span>
</p>
<p id="kittens">
<img src="http://placekitten.com/g/30/50" />
<img src="http://placekitten.com/g/35/50" />
<img src="http://placekitten.com/g/40/50" />
<img src="http://placekitten.com/g/45/50" />
<img src="http://placekitten.com/g/50/50" />
<img src="http://placekitten.com/g/55/50" />
<img src="http://placekitten.com/g/60/50" />
<img src="http://placekitten.com/g/65/50" />
<img src="http://placekitten.com/g/70/50" />
<img src="http://placekitten.com/g/75/50" />
<img src="http://placekitten.com/g/80/50" />
</p>
CSS
p {
margin: 2em 0 0;
}
JavaScript
function randomSet(shuffleScope, shuffleLimit) {
var shuffleSource = $(shuffleScope + ' > *');
// hide all items
shuffleSource.hide();
// randomize items
var shuffleOutput = $(shuffleSource).get().sort(function() {
return Math.round(Math.random()) - 0.5;
}).slice(0, shuffleLimit);
// show selected items
$(shuffleOutput).show();
}
randomSet('#digits', 2);
randomSet('#letters', 4);
randomSet('#kittens', 6);