varios divs, con mismo class (CSS), pero diferentes propiedades.

ZoroRoronoa · #1 (**permalink**) 04/07/2011, 19:20

Hola amigos, no se y no tengo idea de como lograrlo, pero creo que javascript, puede tener la solucion..

Extraigo unos registros de una base de datos con el array y los imprimo con un bucle en un div.

De tal manera que me quedan todos ordenados hacia abajo en forma de lista.
Y la lista tiene un fondo de color rojo (cada div es de color rojo).

Lo que quiero lograr "YA QUE ES UN BUCLE", es como poner dos colores diferentes, de tal manera que quede asi:

1 rojo
2 azul
3 rojo
4 azul
5 rojo
6 azul
7 rojo
8 azul

alguna idea de como lograrlo?

p.d: recuerdo que lo hago con un bucle, y ese bucle imprime un DIV de color rojo, por lo que no encuentro la manera de hacer lo que pido,

ojala ustedes tengan ases bajo la manga y me hechen una mano.

Saludos.

Panino5001 · #2 (**permalink**) 04/07/2011, 21:47

Te convendría hacerlo en lenguaje de servidor (una búsqueda por "colores alternos" o "zebra" seguro daría resultados). Normalmente se hace guardando los colores en un array y usando luego el operador %:

Código:

colores=[color1,color2,..., colorN];
for(i=0;i<colores.length;i++){
    colorActual=colores[i % colores.length];
}

Un ejemplo en javascript:

Código PHP:

  <!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<style>

*{margin:0; padding:0}

li{ padding:3px; font-family:Verdana, Geneva, sans-serif; font-size:11px; line-height:15px; list-style:none;color:#FFF}

</style>

<script type="text/javascript">

onload=function(){

    var colores=['#F00','#00F'],

    els=document.getElementsByTagName('li'),

    l=els.length,i=0;

    for(;i<l;i++){

        els[i].style.background=colores[i%2];    

    }

}

</script>

</head>

<body>

<ul>

<li>uno</li>

<li>dos</li>

<li>tres</li>

<li>cuatro</li>

<li>cinco</li>

<li>seis</li>

</ul>

</body>

</html>