el elemento múltiple de mi página tiene la misma clase como se muestra a continuación
<div> <ol class="sample-class"> <li>list1</li> <li>list2</li> <li>list3</li> </ol> <div class="help">condent 1</div> </div> .... </div> <ol class="sample-class"> <li>list1</li> <li>list2</li> <li>list3</li> </ol> <div class="help">condent 2</div> </divNecesito cambiar el contenido de la ayuda según la clase de muestra I js para seleccionar el elemento, pero no funciona.
let listVal = document.getElementsByClassName('sample-class'); for(let el of listVal) { el.offsetParent.getElementsByClassName('help')[0].innerHTML = "my dynamic condent" }alguien me ayuda Gracias
No puede usar getElementById para encontrar algo dentro de otro elemento, por lo que debe usar getElementByClassName en su lugar. Además, como se menciona en uno de los comentarios, la identificación debe ser única. Dos elementos no pueden tener el mismo ID.
Compruebe amablemente el fragmento a continuación que funcionaría como se esperaba.
let listVal = document.getElementsByClassName('sample-class'); for(let el of listVal) { el.getElementsByClassName('help')[0].innerHTML = "my dynamic condent" } <div> <div class="sample-class"> <ol> <li>list1</li> <li>list2</li> <li>list3</li> </ol> <div class="help">condent 1</div> </div> <div class="sample-class"> <ol> <li>list1</li> <li>list2</li> <li>list3</li> </ol> <div class="help">condent 2</div> </div> </div>Puede crear un nuevo querySelector en el ciclo for para seleccionar el elemento con la clase/id de help , puede lograr esto haciendo lo siguiente:
1 Usando parentElement
const elements = document.querySelectorAll(".sample-class"); for (const element of elements) { element.parentElement.querySelector(".help").innerText = "new text" }2 Usando el selector de hermanos
const elements = document.querySelectorAll(".sample-class"); for (const element of elements) { element.querySelector("~ .help").innerText = "new text" }Ha sobrecomplicado su código al hacer un bucle sobre una matriz y no modificar la matriz sobre la que está haciendo un bucle. También me gusta decir que al acceder a getElementById , siempre obtienes el primer elemento DOM que contiene esta ID. Para solucionar este problema, cambie las identificaciones a clases y recorra estas clases en lugar de los hermanos
const elements = document.querySelectorAll(".help"); for (const element of elements) { element.innerText = "new text" }Si por alguna razón necesita recorrer los elementos ol:
const elements = document.querySelectorAll("ol"); for (const element of elements) { element.nextSibling.innerText = "new text" }