Ayuda con funcion en PHP

[panchompc]

Estimados

 

Recurro a su infinita sabiduría, tengo la siguiente situación:

 

Recojo con un while una lista de productos de una DB para una tienda virtual, esta lista se muestra en pantalla en filas de 3 elementos, el problema es que a el 1º elemento de cada fila debo poner una clase css (class='first') y al ultimo de cada fila la clase css 'last' quedando algo asi:

 

<li class='first'>PRODUCTO 1</li>

<li>PRODUCTO 2</li>

<li class='last'>PRODUCTO 3</li>

 

<li class='first'>PRODUCTO 4</li>

<li>PRODUCTO 5</li>

<li class='last'>PRODUCTO 6</li>

 

<li class='first'>PRODUCTO 7</li>

<li>PRODUCTO 8</li>

<li class='last'>PRODUCTO 9</li>

 

Obiamente, el problema es que la cantidad de productos es relativa, por ende necesito alguna forma de poder identificar los elemento en la 11 posicion y en la ultima de cada fila para poder marcarlos.

 

Alguna sugerencia?

[susodicho]

Declara un arreglo de 3 elementos con las respectivas clases (el elemento del medio no es de ninguna clase), y usas una variable que itere de 0 a 2 (sin importar cuántos productos haya). Aquí hay un ejemplo:

$clase = array(" class='first'", "", " class='last'");

$idx = 0;
for($i = 1;$i <= 15;$i++)
{
	echo "<li". $clase[$idx] .">PRODUCTO $i</li>\n";
	$idx++;
	$idx %= 3;
}

Obviamente, tienes que remplazar el ciclo for por algún ciclo en donde vayas leyendo los valores (filas) desde la base de datos.

La línea:

$idx %= 3;

es para que nunca se pase de 2 ;)

 

:huasonto:

[nazhox]

y con css? esto serviría solo si necesitas esas clases "first" y "last" para agregarle algún estilo.

<style>
  ul{width: 630px;padding: 0;overflow: hidden;}
  li{width: 200px;height: 50px;background-color: gray;list-style: none;margin: 0;float:left;margin-bottom: 10px;margin-right: 10px;}
  li:nth-child(3n-2){background-color: red;} /* esta regla toma el primer li de cada fila, secuencia 3n-2 (1,4,7,10) */
  li:nth-child(3n){background-color: red;} /* esta regla toma el último li de cada fila, secuencia 3n (3,6,9,12) */

  li:first-child{background-color: orange;} /* esta regla toma el primer li */
  li:last-child{background-color: cyan;} /* esta regla toma el último li */
</style>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>

http://jsbin.com/lupidiweze/1/

Edited January 26, 2015 by nazhox