En el blog de Waldek Mastykarz se nos muestra como obtener un item de manera aleatoria con jQuery, partiendo de la siguiente solución.
jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"], {
random: function(a, i, m, r) {
if (i == 0) {
jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
};
return i == jQuery.jQueryRandom;
}
});
Un ejemplo de la utilización del filtro :random sobre los elementos de una lista sería:
<ul>
<li>item 1</a></li>
<li>item 2 </a></li>
<li>item 3 </a></li>
<li>item 4</a></li>
<li>item 5</a></li>
</ul>
<script type="text/javascript">
$().ready(function() {
alert($("li:random").text());
});
</script>
Ver ejemplo en funcionamiento » »
Una aplicación, practicamente inmediata y muy sencilla del filtro, podría ser la de mostrar un texto aleatorio cada vez que se accede a la web.
Para ello, en vez de actuar sobre todos los elementos <li> de nuestra página sólo actuaremos sobre los que tengan la clase "cita_aleatoria". De este modo evitaremos actuar sobre elementos que no deseamos. El código sería similar al siguiente:
<ul>
<li class="cita_aleatoria">cita 1</a></li>
<li class="cita_aleatoria">cita 2 </a></li>
<li class="cita_aleatoria">cita 3 </a></li>
<li class="cita_aleatoria">cita 4</a></li>
<li class="cita_aleatoria">cita 5</a></li>
</ul>
<script type="text/javascript">
$().ready(function() {
//Ocultamos todas las citas
$("li.cita_aleatoria").hide();
//Mostramos una de manera aleatoria
$("li.cita_aleatoria:random").show();
});
</script>