0

quiero crear una cuadricula en css pero no quiero crear en el html div con la clase card-1 hasta el 100 manualmente. Quiero crear este metodo por medio de un bucle en javascript donde me genere todos las card-1 al card-100 con su respetivo div, no se como aplicar lo logica a esto si me pueden ayudar se lo estaria agradecido. Saludos

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div class="container">
    /*Quiero un bucle que me genere los div class card-1 al 100 automaticamente dentro del container para no crear uno por uno manualmente*/
    <div class="card-1"></div>
    <div class="card-2"></div>
    <div class="card-3"></div>
    <div class="card-4"></div>...
  </div>

</body>

</html>

2
  • Para poder apoyarte considera que debes agregar un ejemplo mínimo verificable donde expongas que has tratado, así como problemas puntuales que has tenido, aquí puedes leer Cómo preguntar para mejorar tu publicación
    – user128299
    Commented el 21 ene. 2021 a las 20:48
  • 1
    Si quieres que sea card-# de manera incremental entonces no buscas clases sino ids
    – user128299
    Commented el 21 ene. 2021 a las 21:07

4 respuestas 4

1

Puedes hacer un bucle que itere de 1 a 100 y vaya añadiendo dinámicamente los nodos con las clases que quieres

let container = document.querySelector('.container')

for (i = 1; i <= 100; i++){
   let div = document.createElement('div');
   div.classList.add('card-' + i);
   container.appendChild(div)
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div class="container"></div>

</body>

</html>

1

Puedes probar con este script


const containerOfCards = document.querySelector(".container");
for (let i = 0; i < 100; i++) {
  const divElement = document.createElement("div");
  divElement.setAttribute("class", `card-${i}`);
  containerOfCards.appendChild(divElement);
}



1

Podes hacerlo tambien con una funcion y un while , pasando como argumento la cantidad de divs que quieres

const container = document.querySelector('.container')

const createCards = (numOfCards) => {

let count = 1 

while(count <= numOfCards){

const div = document.createElement('div')
div.classList.add(`card-${count}`)
container.append(div)
count++

}



}

createCards(4)
div{
width:10px;
height:10px;
background-color:tomato;
border:1px solid black
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <section class="container">
     
  </section>

</body>

</html>

2
  • 1
    Si las clases son identificadores aplicables a múltiples elementos ¿entonces por qué generar una nueva por cada uno?, ¿no sería entonces mas lógico que sea ids los que se asignen?
    – user128299
    Commented el 21 ene. 2021 a las 20:58
  • si seria correcto no? pero pidio clases jej , tenes razon , es mas conveniente tener los ids como identificadores unicos Commented el 21 ene. 2021 a las 21:00
0

creo que te puedo dar una respuesta un poco sencilla, sin embargo; checkea los ciclos, pueden funcionarte.

Si tienes VS Code como editor, o alguno que tenga instalado emmet abreviation, puedes digitar el siguiente comando: .card$*100 y dar enter, te aparecerán los 100 que necesitas.

Sin embargo, también puedes revisar CSS layout grid, puede que te funcione mejor para no tener que crear tantos divs.

1
  • Pero el OP quiere el resultado mediante programación
    – user128299
    Commented el 21 ene. 2021 a las 21:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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