Todavía no estoy aprendiendo jQuery, así que javascript, por favor. aquí está el HTML como a continuación
<ul style="position: absolute;"> <li style="position: absolute;"> <div role="checkbox" class="filter-list-cell filter-text css-ahhuez"> <span class="dog-123" title="dogname">TEDDY</span> <span>8%</span> </div> </li> <li style="position: absolute;"> <div role="checkbox" class="filter-list-cell filter-text css-voqwhr"> <span class="dog-123" title="dogname">OZZY</span> <span>7%</span> </div> </li> . . . 8 more <li> </ul>lo que trato de obtener está dentro del valor li > span "TEDDY" y luego li > span "OZZY" y el resto de 8 valores li más dentro del intervalo, haga que el resultado sea una matriz como:
dogname = [TEDDY,OZZY,REX...]Intenté hacer clic derecho para copiar la ruta del selector y luego usar document.querySelectorAll(), obtuve 10 NodeList, i Array.from it pero aún necesito pasar el div para obtener el valor de intervalo.
creo que debería recorrerlos? pero me parece extraño... no estoy muy familiarizado con html, así que por favor dame alguna pista o dirección para este problema
¡Gracias!
Tome los perros por el nombre de la clase dog-123 y luego map sobre la lista de nodos (convertida en una matriz) para crear una nueva matriz de nombres a partir del contenido de texto de cada nodo.
const dogs = document.querySelectorAll('.dog-123'); const names = [...dogs].map(dog => dog.textContent); console.log(names); <ul> <li> <span class="dog-123">TEDDY</span> <span>8%</span> </li> <li> <span class="dog-123">OZZY</span> <span>7%</span> </li> <li> <span class="dog-123">Bob from Accounting</span> <span>700%</span> </li> </ul>Documentación adicional
Puede hacerlo usando los selectores de CSS : tome el primer span dentro de cada div que está dentro de un li que está dentro de un ul . La parte :first-child se denominapseudoclase , es decir, selecciona un elemento con respecto no solo a sí mismo y a sus padres/hermanos, sino también a las características del árbol XML o incluso a características externas como el historial del navegador.
Sin embargo, cuidado, porque si tiene otro ul cuyos descendientes tienen esas características, estaría seleccionando valores no deseados.
En una línea:
Array.from(document.querySelectorAll("ul > li > div span:first-child")).map(x => x.innerText); Si quisiera ser más preciso (en un raspador, por ejemplo), probablemente comenzaría con un elemento raíz con una identificación conocida (por lo tanto, única). Así que digamos que tiene <ul id="myList"> , entonces el selector de CSS sería #myList > li > div span:first-child .