En este post vamos a ver un algoritmo para separar etiquetas HTML cada cierto número de elementos. Por ejemplo, colocar un div cada 4 elementos sin importar la cantidad total de los elementos.

Esto sirve como ejercicio y para aplicaciones de la vida real. Recientemente tuve que separar un grupo de etiquetas div de 4 en 4 y encerrarlos en un div contenedor.

Entonces veamos cómo separar elementos cada cierto número y encerrarlos en otro contenedor sin importar la cantidad de elementos ni cada cuánto debemos separarlos. Básicamente vamos a realizar agrupaciones y división de datos.

Algoritmo

Escribí la prueba del concepto en C. Como lo dije, tenemos una cantidad variable de elementos. Debemos separar esos elementos en grupos y además de eso colocar un separador al inicio y fin.

Definimos una variable (bandera) que nos ayudará a conocer el estado de la etiqueta HTML, ya sea cerrada o abierta.

Hacemos un ciclo desde 1 hasta la cantidad de elementos. En cada paso del ciclo, al inicio, comprobamos si la etiqueta está cerrada, ya que si está cerrada debemos abrirla y cambiar el estado de la bandera.

#include <stdio.h>

int main()
{
 int abierta = 0;
 int cadaCuantos = 3;
 int cantidadElementos = 8;
 for (int x = 1; x <= cantidadElementos; x++)
 {
  if (!abierta)
  {
   printf("--Apertura--\n");
   abierta = 1;
  }
  printf("Elemento %d\n", x);
  if (x % cadaCuantos == 0)
  {
   printf("--Cierre--\n");
   abierta = 0;
  }
 }
 if (abierta)
 {
  printf("--Cierre--\n");
 }
}

Luego imprimimos el elemento o mejor dicho colocamos el elemento que iría entre el contenedor o subgrupo.

Finalmente comprobamos si el número de paso actual, al ser dividido de manera entera y sacar el sobrante, es 0 (es decir, comprobamos si es múltiplo) ya que en ese caso significa que ese es el último elemento de ese grupo, por lo cual debemos cerrar la etiqueta y cambiar el estado de la bandera.

Después del ciclo debemos comprobar si la etiqueta se quedó abierta para cerrarla. Eso es por si la cantidad de elementos no es divisible entre la cantidad de elementos por grupo.

Si te fijas en la imagen verás que todos los elementos fueron divididos en subgrupos y que no importa la cantidad de elementos.

Encerrar elementos HTML cada cierta cantidad

Con el algoritmo que te mostré anteriormente ya puedes implementar la lógica por ti mismo. Yo lo hice en PHP y quedó algo así:

<?php
$x = 1;
$abierta = false;
$cadaCuantos = 4;
foreach ($datos0 as $dato0) {
 if (!$abierta) {
  echo '<div class="row" style="padding:10px;">';
  $abierta = true;
 }
 echo '<div class="col-md-3 ">
      Aquí más elementos...
    </div>';
 if ($x % $cadaCuantos == 0) {
  echo '</div>';
  $abierta = false;
 }
 $x++;
}
if ($abierta) {
 echo '</div>';
}

En este caso necesitaba agrupar los div de 4 en 4 dentro de un contenedor .row, así no había más de 4 elementos por fila. Implementé un contador ya que se usa un foreach y no un for.

Sé que ya existen maneras de colocar divs infinitos y sin preocuparse por separarlos, pero en este caso específico tuvo que ser así.