0
208
ViewsForma correcta de insertar nuevos LI-s en la lista OL-s desde JS arr
Tengo algunas listas en HTML y una serie de datos en JS.
Quiero que se creen nuevos <li> s en cada <ol> de acuerdo con el primer elemento de <li> .
const types = [{ name: "house", sq: 250, year: 2020 }, { name: "apartment", sq: 70, year: 2010 }, ]; /*search key*/ document.querySelectorAll('.specs').forEach(ol => { const name = ol.querySelector("#name").textContent; const search = name; /*object search*/ const res = () => { let result = [] for (const item of types) { if (item.name.includes(search)) { return item; } } return result } /* THIS SHOULD ADD NEW LIs */ var x = document.createElement("LI"); var t = document.createTextNode(`${res().sq}`); x.appendChild(t); document.getElementById("hhh").appendChild(x); }); <ol id="hhh" class="specs"> <li id="name">apartment</li> </ol> <ol id="hhh" class="specs"> <li id="name">house</li> </ol> Lo que tengo ahora es: que los nuevos <li> se crean solo en el primer <ol> .
El resultado incorrecto se muestra aquí:
¿Cómo puedo solucionarlo para que cada elemento <li> se cree en el lugar correcto ( <ol> )?
·
Santiago Trujillo
1 answers
Answer question0
¡Tenga en cuenta que las identificaciones deben ser únicas! Estás usando varias identificaciones varias veces. Por eso, su elemento siempre se incluirá en el primer elemento con el ID hhh .
Para resolver esto, debe proporcionar a ambos ul una identificación única. La forma más fácil sería usar como ID la clave del nombre:
const types = [{ name: "house", sq: 250, year: 2020 }, { name: "apartment", sq: 70, year: 2010 }, ]; for (let i = 0; i < types.length; i++) { let el = types[i].name; let sq = types[i].sq; let year = types[i].year; document.querySelector(`#${el}`).insertAdjacentHTML('beforeend', `<li>${sq}</li>`); document.querySelector(`#${el}`).insertAdjacentHTML('beforeend', `<li>${year}</li>`); } <ol id="apartment" class="specs"> <li>apartment</li> </ol> <ol id="house" class="specs"> <li>house</li> </ol>
·
Santiago Trujillo
Report
Answer question