Embaralhar ordem de itens de uma lista com javascript
Hoje no iMasters um cara pediu para desordenar itens de uma lista html.
Bom, desordenar um array é simples, e array em javascript é um objeto, logo desordenar um objeto é simples também.
Basta pegarmos os itens da lista, desordena-los, remove-los do DOM, e então inseri-los novamente.
Versão com javascript puro
<ul id="items">
<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>
</ul>
<script>
(function(){
/**
* Deixar os itens do array em ordem aleatoria
*/
Array.prototype.shuffle = function() {
var i = this.length, j, tempi, tempj;
if ( i == 0 ) return this;
while ( --i ) {
j = Math.floor( Math.random() * ( i + 1 ) );
tempi = this[i];
tempj = this[j];
this[i] = tempj;
this[j] = tempi;
}
return this;
}
/**
* Inicialização das variaveis
*/
var items = document.getElementById('items'),
lis = items.getElementsByTagName('li'),
arr = [],
max = lis.length;
/**
* Colocando o html colection em um array
*/
for( var i = 0; i<max; i++ ){
arr[i] = lis[i];
}
arr = arr.shuffle();
/**
* Removendo os items
*/
while (items.firstChild) {
items.removeChild(items.firstChild);
}
/**
* Inserindo novamente no DOM
*/
while( i-- ){
items.appendChild( arr[i] );
}
})();
</script>
Versão com jQuery
<ul id="items">
<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>
</ul>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
var shuffle = function( el ) {
var i = el.length, j, tempi, tempj;
if ( i == 0 ) return el;
while ( --i ) {
j = Math.floor( Math.random() * ( i + 1 ) );
tempi = el[i];
tempj = el[j];
el[i] = tempj;
el[j] = tempi;
}
}
var arr = jQuery('#items').find('li');
shuffle( arr );
jQuery('#items').html( arr );
</script>