5

Como ejemplo pongo esta bucle foreach:

$colores = array(
    "rojo",
    "verde",
    "azul",
    "amarillo"
); 

foreach ($colores as $valor) {
    echo '<span class="clase">' . $valor . '</span>';
}

Al <span>, en vez de clase="clase" quiero aplicar a cada segundo valor una clase:

class="izquierda"
class="derecha"

Para que cada segundo valor esté alineado a la izquierda y cada segundo restante, a la derecha.

2
  • 1
    Lukas, la respuesta era bastante facil (no quito crédito a Carmen, por supuesto). Que fue lo que intentaste y fracasó?
    – lois6b
    el 17 jul. 2017 a las 8:08
  • 1
    ¿A que te refieres con "cada segundo valor"? Todos han entendido que te refieres a los valores pares (posiblemente sea eso) pero me desconcierta lo de Para que cada segundo valor esté alineado a la izquierda y cada segundo restante, a la derecha. El segundo valor del array es "verde" pero ¿el segundo restante cual es?
    – user7176
    el 17 jul. 2017 a las 9:10

2 respuestas 2

6

Puedes controlar la posición mientras recorres el array, y ver si es par o impar.

for ($i=0; $i<count($colores), $i++) {
   if ($i%2==0) {
    echo '<span class="izquierda">' . $colores[$i] . '</span>';
   } else {
     echo '<span class="derecha">' . $colores[$i] . '</span>';
   }
}
1
  • 2
    Probablemente sea mejor poner el count() fuera del bucle para no tener que calcularlo cada vez. También sería interesante usar una variable del tipo $class_id y asignarle izq/dcha y luego decir echo '<span class="$class_id" ....
    – fedorqui
    el 17 jul. 2017 a las 8:31
5

Basándome en la respuesta de @Carmen, esto haría lo mismo pero con menos líneas de código:

$total = count($colores);

for ($i = 0; $i < $total, $i++) { 
   $class = ($i%2) ? 'derecha' : 'izquierda'; // Edit: Optimización sugerida por @fedorqui 
   echo '<span class="' . $class . '">' . $colores[$i] . '</span>';   
}

Además, puedes aplicar distintos estilos a elementos html usando únicamente css usando la pseudo-clase :nth-child y los valores odd (impar) y even (par)

Por ejemplo:

.element {
    display: inline-block;
    width: 49%;
}

.element:nth-child(odd) {
    text-align: left;
}

.element:nth-child(even) {
    text-align: right;
}
<div class="padre">
     <div class="element">izquierda</div>
     <div class="element">derecha</div>
     <div class="element">izquierda</div>
     <div class="element">derecha</div>
     <div class="element">izquierda</div>
     <div class="element">derecha</div>
</div>

1
  • 2
    Qué bueno lo de nth-child, no lo sabía. Puestos a usar el operador ternario y potencialidades, puedes asumir que $i%2 devuelve valor True/False y poner $class = ($i%2) ? 'derecha' : 'izquierda';.
    – fedorqui
    el 17 jul. 2017 a las 8:42

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.