Tengo una lista de tipo <ul>
y quiero recorrer esa lista para recuperar los datos que contiene cada <li>
e ir guardandolos en un array
-
9Posible duplicado de ¿Cómo recupera el value de las <li>? – streleon el 7 nov. 19 a las 1:15
añade un comentario
|
2 respuestas
podrías hacerlo así:
let lista = document.getElementById("elIdQueTengaLaLista");
let items = lista.getElementsByTagName("li");
for (let i=0; i<items.length; ++i) {
// Aquí accedes a cada item de la lista así: items[i]
// Por ejemplo si quieres leer el contenido de cada item, sería así
items[i].innerHTML
}
Para lograr eso te propongo el siguiente código
function getDataFromList(id) {
let data = [...document.querySelectorAll(`#${id} li`)]
.map(element => element.innerText);
console.log(data);
}
getDataFromList('lista');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id="lista">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="aux.js"></script>
</body>
</html>
Gracias a la función querySelectorAll
puedes obtener todos los li
al interior de un id dado, luego con el operador ... de spread y los corchetes conviertes lo encontrado en un arreglo, que finalmente puedes mapear como el contenido de texto de cada elemento, si lo que buscas es conservar el HTML interno de cada li
deberás cambiar innerText
por innerHTML
.