Explicación rápida:
Mi código se ve así:
<div class="table"> - div class 1 (in these divs 1-4 -> there a nested divs for Name / Score / ...) - div class 2 - div class 3 - div class 4 - ... </div>Cambio los valores con JavaScript:
document.getElementById('1').textContent=data.user[0].Score + "M"; document.getElementById('1').textContent=data.user[1].Score + "M"; document.getElementById('3).textContent=data.user[2].Score + "M"; document.getElementById('3).textContent=data.user[3].Score + "M";Sé que puedo FOR LOOP a través de esto, pero mi problema es:
Quiero recorrer los niños de mi clase de "mesa". Por lo tanto, no tengo que escribir los números para "clase=1" ... "clase=2" 3 4 5 6
Primero necesita obtener todos los elementos secundarios con una variable como:
var children = document.querySelector('.container').children;
Luego, necesita un bucle JS para recorrerlos, lo que puede hacer con:
for (var i = 0; i < children.length; i++) { /* commands */ }
Entonces necesitas un contador que puedas declarar fácilmente con una variable:
var counter = 1;
Subes ese contador después de cada bucle declarando dentro del bucle:
var counter = counter + 1;
Para agregar una lista de clase con numeración, debe agregar un nombre de clase continuo combinando el nombre de clase con el contador como variable:
var className = "class-" + counter;
Luego puede agregar este nombre de clase a cada elemento usando:
child.classList.add(className);
var children = document.querySelector('.container').children, counter = 1; for (var i = 0; i < children.length; i++) { var child = children[i]; var className = "class-" + counter; /* just adds a counter to the innerHTML to demonstrate */ child.innerHTML = "class = class-" + counter; /* what you actually want */ child.classList.add(className); /* rises the counter */ var counter = counter + 1; } <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> </div>Como entendí, usted corrige que desea recorrer las tablas de niños y capturar los divs contenidos por este derecho. Si es así, intente seleccionar todos los divs que son elementos secundarios de la tabla con la ayuda de document.querySelectorAll . Hecho eso, puedes recorrerlos como:
const tableDivs = document.querySelectorAll("table div"); [...tableDivs].forEach((div, index) => { div.textContent = data?.user[index]?.Score + "M"; });Como solo vi algunas piezas de código, no puedo verificar completamente el resultado. Es posible que deba adaptar algunas piezas para que funcione, pero estoy seguro de que entiende la idea, ¿verdad?