11054 Suscriptores al Feed del Blog
93 Suscriptores al Feed de Anotaciones Breves
58 usuarios online
diseño web valencia en 500 iconos gratuitos para tus aplicaciones web
Filtro :random con jQuery
0 COMENTARIOS - Publicado hace 14 meses - Clasificado en: JQUERY, TIPS, TUTORIALESEn 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>
Ver ejemplo 2 en funcionamiento » »
Algunas entradas relacionadas:
- Rollover sobre imágenes con jQuery
- Cómo saber cuantos elementos hemos seleccionado con jQuery
- Dividir formularios en pasos con jQuery
- 25 excelentes consejos para perfeccionar el uso de jQuery
- jQuery Delay Plugin
- Redimensionar el tamaño de fuente de forma animada con jQuery
- Autotab: plugin de jQuery para auto-tabulación y filtrado de campos
También te puede interesar:
Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.
|
|
|
|
|
