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>