I have a list that is sorted alphabetically, but links from each li are not changing if I verify the elements links after sorting. Can't figure out what am I missing.
Any help with explanations would be greatly appreciated.
My code in 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>
My JS code:
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];
}
You are rewriting the innerHTML of the <a> elements, but not changing their .href attributes. It might be simpler to just move the elements around instead of rebuilding them.
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>