Para ordenar una lista ul automaticamente lo podemos hacer en tres pasos
Paso 1: Preparar el HTML
Primero, necesitas crear una lista no ordenada (
<ul">) en tu HTML y agregar elementos de lista ( <li">) con enlaces ( <a">) como lo hiciste en tu lista original. Aquí tienes
un ejemplo básico:
A continuación, necesitas agregar el script JavaScript que ordenará los elementos de la lista
automáticamente. Coloca este código justo antes del cierre del body
Codigo del javascript
<script>
// Obtener la lista y sus elementos
const list = document.getElementById('list');
const listItems = Array.from(list.getElementsByTagName('li'));
// Ordenar los elementos alfabéticamente
listItems.sort((a, b) => {
const textA = a.textContent.trim().toLowerCase();
const textB = b.textContent.trim().toLowerCase();
return textA.localeCompare(textB);
});
// Limpiar la lista original
list.innerHTML = '';
// Agregar los elementos ordenados de nuevo a la lista
listItems.forEach(item => {
list.appendChild(item);
});
</script>
Paso 3: Personalizar y Probar
Puedes personalizar la lista de enlaces y agregar tantos elementos como desees. Además, asegúrate de
reemplazar los textos y enlaces de ejemplo en el código con los tuyos.
Luego, guarda este archivo HTML en tu computadora y ábrelo con tu navegador web. Verás que la lista
se ordena automáticamente en orden alfabético.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias