Tengo una lista ordenada alfabéticamente, pero los enlaces de cada li no cambian si verifico los enlaces de los elementos después de ordenarlos. No puedo entender lo que me estoy perdiendo.
Cualquier ayuda con las explicaciones sería muy apreciada.
Mi código en HTML:
<ul class="row list-unstyled" id="testingList"> <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/1" target="_blank"> <div class="row no-gutters"> <div class="col"> <h3 class="top-box__title">Pink</h3> </div> </div> </a> </li> <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/2" target="_blank"> <div class="row no-gutters"> <div class="col"> <h3 class="top-box__title">White</h3> </div> </div> </a> </li> <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/3" target="_blank"> <div class="row no-gutters"> <div class="col"> <h3 class="top-box__title">Brown</h3> </div> </div> </a> </li> </ul>Mi código JS:
let pickList = document.querySelector("#testingList"); let li = pickList.querySelectorAll("a"); resultList = []; for (let i = 0; i < li.length; i++) { resultList.push(li[i].innerHTML); console.log(resultList); } resultList.sort(); for (let j = 0; j < li.length; j++) { li[j].innerHTML = resultList[j]; }Está reescribiendo el HTML interno de los elementos <a> , pero sin cambiar sus atributos .href . Podría ser más sencillo simplemente mover los elementos en lugar de reconstruirlos.
let pickList = document.querySelector("#testingList"); let lis = [...pickList.querySelectorAll("li")]; lis.sort((a, b) => { // sort on the text of the h3 elements contained within const asort = a.querySelector('h3.top-box__title').innerText; const bsort = b.querySelector('h3.top-box__title').innerText; return asort.localeCompare(bsort); }); // append each li to the list in order lis.forEach(li => pickList.appendChild(li)); <ul class="row list-unstyled" id="testingList"> <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/1" target="_blank"> <div class="row no-gutters"> <div class="col"> <h3 class="top-box__title">Pink</h3> </div> </div> </a> </li> <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/2" target="_blank"> <div class="row no-gutters"> <div class="col"> <h3 class="top-box__title">White</h3> </div> </div> </a> </li> <li class="col-sm-6 col-lg-4 col-xl-3 mb-3 top-box"><a class="top-box__content" href="https://www.example.com/info/3" target="_blank"> <div class="row no-gutters"> <div class="col"> <h3 class="top-box__title">Brown</h3> </div> </div> </a> </li> </ul>