De hecho, estoy tratando de agregar la clase (Seleccionada) al li cuando se hace clic y se elimina la Clase del vecino li.
El problema es que no funciona cuando hay 2 ul, el siguiente código solo funciona en el 1er ul o cuando hago clic en el li del segundo li, se elimina el primer li activo
const menuLis = document.querySelectorAll("#top-nav > li"); for (let li of menuLis) { li.addEventListener("click", function(){ // 1. Remove Class from All Lis for (let li of menuLis) { li.classList.remove('selected'); } // 2. Add Class to Relevant Li this.classList.add('selected'); }); } .selected{color:red} <ul id='top-nav'> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul id='top-nav'> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>Gracias por la ayuda
Debe usar una clase, así como separar el manejo de cada ul para que funcione correctamente:
const menuUls = document.querySelectorAll('.top-nav'); for (const ul of menuUls) { const menuLis = ul.querySelectorAll('li'); for (const li of menuLis) { li.addEventListener('click', function () { // 1. Remove Class from All Lis for (let li of menuLis) { li.classList.remove('selected'); } // 2. Add Class to Relevant Li this.classList.add('selected'); }); } } .selected{color:red} <ul class='top-nav'> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul class='top-nav'> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>Los ID deben ser únicos, uno por página solamente, por lo que debe usar una clase en su lugar.
Otra cosa en la que pensar es: en cada clic, está agregando nuevos oyentes a todos los elementos de la lista, lo que podría estar bien para un pequeño ejemplo, pero podría resultar ineficiente a escala.
Un método alternativo sería usar la delegación de eventos : adjunte un oyente a cada elemento principal, el elemento de la lista, y verifique la información en el objetivo del evento para actualizar sus elementos de la lista.
const menus = document.querySelectorAll('.top-nav'); menus.forEach(menu => { menu.addEventListener('click', handleClick, false); }); function handleClick(e) { const { nodeName, parentNode } = e.target; // If the clicked element is a list item if (nodeName === 'LI') { // Find all the list items of the current list const items = parentNode.querySelectorAll('li') // Remove the class from each, and then add the // class to the element that was clicked items.forEach(i => i.classList.remove('selected')); e.target.classList.add('selected'); } } .selected { color:red; } li:hover { cursor: pointer; } <ul class="top-nav"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ul class="top-nav"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>Documentación adicional
Puede seleccionar los siblings del elemento y eliminar la clase selected .
const menuLis = document.querySelectorAll(".top-nav > li"); for (let li of menuLis) { li.addEventListener("click", function(){ for (let sibling of this.parentNode.children) { sibling.classList.remove('selected'); } this.classList.add('selected'); }); } .selected{color:red} <section> <section> <div> <ul class='top-nav'> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </div> </section> <ul class='top-nav'> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </section>