• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

405
Views
sorting <li> elements alphabetically

How can I sort an unordered list alphabetically while retaining outer html? My current setup sorts the list alphabetically, however it only rearranges the inner html of the list elements rather than the entire element, which is a problem because within the tag i have event based script calls that are specific to each element. The list elements themselves are added by script from an xml document. Here's the html:

var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    onLoad(this);
  }
};
xhttp.open("GET", "stocks.xml", true);
xhttp.send();


function onLoad(xml) {
  var x, i, txt, xmlDoc;
  xmlDoc = xml.responseXML;
  txt = "<ul id = stocksymbols>";
  var StockList;
  x = xmlDoc.getElementsByTagName("Stock");

  for (i = 0; i < x.length; i++) {
    symbol = x[i].getAttribute('symbol');
    txt += "<li onmouseover=\"mouseOver('" + symbol + "')\" onmouseout=\"mouseOut()\">" + symbol + "</li>";
  }
  document.getElementById("stockList").innerHTML = txt + "</ul>";
  sortList("stocksymbols");
}

function sortList(ul) {
  if (typeof ul == "string")
    ul = document.getElementById(ul);

  var lis = ul.getElementsByTagName("LI");
  var vals = [];
  for (var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);
  vals.sort();
  for (var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

function mouseOver(target) {
  stockInfoDiv = document.getElementById("stockInfo");
  stockInfoDiv.innerHTML = target;
}

function mouseOut() {
  stockInfoDiv.innerHTML = "";
}
h2 {
  color: Navy;
}

li {
  font-family: monospace;
  font-weight: bold;
  color: Navy;
}

li:hover {
  font-family: monospace;
  font-weight: bold;
  color: red;
}
<html>

<head>
  <title></title>

</head>

<body>
  <h2>List of Stocks:</h2>

  <div id="stockList">
  </div>

  <br />
  <br />
  <br />

  <div id="stockInfo">
  </div>
</body>

</html>

about 3 years ago · Santiago Trujillo
3 answers
Answer question

0

Instead of lis[i].innerHTML = vals[i];, sort the lis list and do ul.appendChild(lis[i]). This will remove the current li from its position in the DOM and append it to the end of the ul. I'm assuming the only li elements are direct children of the ul.

function sortList(ul) {
  var ul = document.getElementById(ul);

  Array.from(ul.getElementsByTagName("LI"))
    .sort((a, b) => a.textContent.localeCompare(b.textContent))
    .forEach(li => ul.appendChild(li));
}

sortList("stocksymbols");
<ul id=stocksymbols>
  <li>AAA</li>
  <li>ZZZ</li>
  <li>MMM</li>
  <li>BBB</li>
</ul>

about 3 years ago · Santiago Trujillo Report

0

<ul id="mylist">
    <li id="list-item3">text 3</li>
    <li id="list-item4">text 4</li>
    <li id="list-item2">text 2</li>
    <li id="list-item1">text 1</li>
</ul>
<script>
var list = document.getElementById('mylist');

var items = list.childNodes;
var itemsArr = [];
for (var i in items) {
    if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
        itemsArr.push(items[i]);
    }
}

itemsArr.sort(function(a, b) {
  return a.innerHTML == b.innerHTML
          ? 0
          : (a.innerHTML > b.innerHTML ? 1 : -1);
});

for (i = 0; i < itemsArr.length; ++i) {
  list.appendChild(itemsArr[i]);
}
</script>
about 3 years ago · Santiago Trujillo Report

0

So lets do it with the XML, build an array, sort the array, and than build the lis.

var symbols = xmlDoc.getElementsByTagName("Stock");
var items = [];
for (var i = 0; i < symbols.length; i++) {
 items.push(symbols[i].getAttribute('symbol'));  //build array of the symbols
}
var lis = items.sort()  //sort the array
               .map( function(txt) {  //loop over array
                 return "<li>" + txt + "</li>";  //build the li
               }).join("");  //join the indexes as one string
console.log(lis);  //the lis in a string.
about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error