es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Quiero poner los contenidos de las matrices en un elemento h3 y luego ponerlos en sus respectivos contenedores.

Quiero poner los contenidos de las matrices en un elemento h3 y luego ponerlos en sus respectivos contenedores.

18 Jun, 2023 Programación

Tengo una matriz que contiene 10 matrices, y coloco una matriz en cada uno de sus contenedores, creando un h3 que contiene el contenido de esa matriz. Pero lo que ocurre es que todas las matrices van a todos sus contenedores.
Puedes ver el ejemplo a continuación:

.list-container {
  width: 300px;
  background: royalblue;
  padding: 1em;
  margin: 2rem;
}
h3 {
  display: inline-block;
  font-size: .75rem;
  color: white;
  padding: .75em;
  background: red;
  margin: .75rem;
}
/* este es un estilo de ejemplo */
.example {
  width: 300px;
  background: royalblue;
  padding: 1em;
  margin: 2rem;
}

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

<!-- estos son los ejemplos -->
<h2>abajo está el ejemplo correcto</h2>
<div class="example">
  <h3>Frontend</h3>
  <h3>Senior</h3>
  <h3>HTML</h3>
  <h3>CSS</h3>
  <h3>JavaScript</h3>
</div>
<div class="example">
  <h3>Fullstack</h3>
  <h3>Midweight</h3>
  <h3>Python</h3>
  <h3>React</h3>
</div>

const arrList = [
    ["Frontend", "Senior", "HTML", "CSS", "JavaScript"],
    ["Fullstack", "Midweight", "Python", "React"]
];
const listContainer = document.querySelectorAll('.list-container');
listContainer.forEach(container => {
    arrList.forEach(list => {
        const h3 = document.createElement('h3');
        h3.innerHTML = list;
        container.append(h3);
    });
});
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El código de arriba crea un bucle dentro de otro bucle. El bucle exterior itera a través de cada contenedor (.list-container) encontrado en el documento HTML. El bucle interior itera a través de cada matriz (list) encontrada en la matriz arrList.

    Para cada iteración del bucle externo, el bucle interior crea un nuevo elemento h3 y establece su contenido en la matriz actual (list). Después de que se crea el h3, se agrega al contenedor actual (container).

    El problema con este código es que agrega todos los elementos h3 a todos los contenedores. Esto es porque el bucle interior se ejecuta para cada contenedor y agrega un nuevo elemento h3 para cada matriz en arrList, sin tener en cuenta a qué contenedor pertenece.

    Para solucionar este problema, necesitamos cambiar el bucle interior para que solo cree y agregue un elemento h3 si corresponde al contenedor actual. Una forma de hacer esto es usar el índice del contenedor actual (containerIndex) para acceder a la matriz correspondiente en arrList, así:

    const arrList = [
  ["Frontend", "Senior", "HTML", "CSS", "JavaScript"],
  ["Fullstack", "Midweight", "Python", "React"]
];
const listContainers = document.querySelectorAll('.list-container');
listContainers.forEach((container, containerIndex) => {
  const list = arrList[containerIndex];
  list.forEach(item => {
    const h3 = document.createElement('h3');
    h3.innerHTML = item;
    container.appendChild(h3);
  });
});

    Ahora, el bucle interior solo itera a través de la matriz (list) que corresponde al contenedor actual. Accedemos a la matriz correcta usando el containerIndex como el índice de la matriz en arrList. Esto significa que cada elemento h3 se crea y agrega solo al contenedor correcto.

Comments are closed.