Listado en modo pijama
JQuery
Publicado el 4 de Marzo del 2012 por Xavi (548 códigos)
4.452 visualizaciones desde el 4 de Marzo del 2012
Código que muestra como cambiar el color de fondo de un listado en modo pijama (dos colores).
<html>
<head>
<title>each del core de jQuery</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
/* Una vez se haya cargado el DOM */
$(document).ready(function(){
/* Indicamos a todas etiquetas <p> que tengan un padding de 5px*/
$("p").css("padding","5px");
/* Realizamos un bucle por todas las etiquetas <p> que hay dentro del <div> listado */
$("p", "#listado").each(function(i){
/* i, contiene el indice de la etiqueta <p> dentro del <div> listado*/
if(i%2==0){
$(this).css("background-color", "#808080");
}else{
$(this).css("background-color", "#008080");
}
});
});
</script>
</head>
<body>
<p>Esta linea esta fuera del id "listado", por lo que no se cambia el color del fondo</p>
<div id='listado'>
<p>primera linea</p>
<p>segunda linea</p>
<p>tercera linea</p>
<p>quarta linea</p>
<p>quinta linea</p>
</div>
<p>Esta linea esta fuera del id "listado", por lo que no se cambia el color del fondo</p>
</body>
</html>
Comentarios sobre la versión: Versión 1 (0)
No hay comentarios