How to sort the Ul and Li div data

Question

I want to sort the <ul> and <li> data in jquery.

Here is my sample code

<ul id="rootUl">
  <li>
      <div id='title'>MSFT</div>
      <div id='price'>230</div>
      <div id='net_change'>0.2 - 0.4%</div>
      <div id='Volume'>3000</div>
  <li>

  <li>
      <div id='title'>FB</div>
      <div id='price'>200</div>
      <div id='net_change'>0.3 - 0.6%</div>
      <div id='Volume'>2800</div>
  <li>
</ul>

I have tried like this:

$( "#title" ).click(function() {
  var items = $('#rootul > li').get();
  console.log( items );
  var nestedItems = $('#rootul > li > ul > li').get(); 
  items = sort(items);      
  adjustItems('#rootul', items);
  nestedItems = sort(nestedItems);
  adjustItems('#rootul > li > ul', nestedItems); 
});

function sort(items) {
  items.sort(function(a,b){
    var keyA = $(a).text();
    var keyB = $(b).text();

    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
  });       
  return items;
}

function adjustItems(sel, items) {
  var ul = $(sel);
  $.each(items, function(i, li){
    ul.append(li);
  });
}

If I click the button sort by title second li will be changed as first ascending order

<button id='title'>Sort By Title </button> 
<button id='price'>Sort By price</button> 
<button id='chnage'>Sort By net change</button>

Answer 1

First of all do not use same id duplicated on page, use classes for it.

<div id=tableToSort">
     <ul id="rootUl">
      <li>
          <div class='title'>MSFT</div>
          <div class='price'>230</div>
          <div class='change'>0.2 - 0.4%</div>
          <div class='volume'>3000</div>
      </li>

       <li>
          <div class='title'>FB</div>
          <div class='price'>200</div>
          <div class='change'>0.3 - 0.6%</div>
          <div class='volume'>2800</div>
      </li>
     </ul>
</div>

after that if you use;

var myArr=new Array();
var allList=$("#rootUl li");
for(var x=0;x<allList.length;x++){
    var newRow=allList[x];
    var newObj={
        "title":$(newRow).find(".title").text(),
        "price":parseFloat($(newRow).find(".price").text()),
        "net_change":parseFloat($(newRow).find(".change").text()),
        "Volume":parseFloat($(newRow).find(".volume").text())
    };
    myArr.push(newObj);
}

Now you took all values on your myArr array. After all you can use these functions to sort your array;

function sortByKeyDesc(array, key) {
    return array.sort(function (a, b) {
        var x = a[key]; var y = b[key];
        return ((x > y) ? -1 : ((x < y) ? 1 : 0));
    });
}
function sortByKeyAsc(array, key) {
    return array.sort(function (a, b) {
        var x = a[key]; var y = b[key];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
}

Example; (be careful your button id is not "change" it is "chnage")

$("#price").on("click",function(){
    myArr=sortByKeyAsc(myArr,"price");
});
$("#volume").on("click",function(){
    myArr=sortByKeyAsc(myArr,"volume");
});
$("#change").on("click",function(){
    myArr=sortByKeyAsc(myArr,"change");
});

And then you can print your new array using jquery create doms like;

var createNewTable=function(){
var myDom=$("<ul>",{"id":"rootUl"});

for(var x=0;x<myArr.length;x++){

    var obj=myArr[x];

    var myTitle=$("<li>",{
        "class":"title",
        "text":obj.title
    });
    var myPrice=$("<li>",{
        "class":"price",
        "text":obj.price
    });
    var myChange=$("<li>",{
        "class":"net_change",
        "text":obj.change
    });
    var myVolume=$("<li>",{
        "class":"Volume",
        "text":obj.volume
    });
        myDom.append(
            myTitle,
            myPrice,
            myChange,
            myVolume
        );
    }

    $("#tableToSort").html(myDom);
};

Answer 2

You used a lower case id, id name is case sensitive. I also don't see any nested ul...

$("#title").click(function() {
  var items = $('#rootUl > li').get();
  console.log(items);
  var nestedItems = $('#rootUl > li > ul > li').get();
  items = sort(items);
  adjustItems('#rootUl', items);
  nestedItems = sort(nestedItems);
  adjustItems('#rootUl > li > ul', nestedItems);
});

function sort(items) {
  items.sort(function(a, b) {
    var keyA = $(a).text();
    var keyB = $(b).text();

    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
  });
  return items;
}

function adjustItems(sel, items) {
  var ul = $(sel);
  $.each(items, function(i, li) {
    ul.append(li);
  });
}

ul {
  display: flex;
  flex-direction: column;
}

li {
  display: flex;
}

li div {
  width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="rootUl">
  <li>
    <div id='title'>MSFT</div>
    <div id='price'>230</div>
    <div id='net_change'>0.2 - 0.4%</div>
    <div id='Volume'>3000</div>
  </li>
  <li>
    <div id='title'>FB</div>
    <div id='price'>200</div>
    <div id='net_change'>0.3 - 0.6%</div>
    <div id='Volume'>2800</div>
  </li>
  <li>
    <div id='title'>FB2</div>
    <div id='price'>200</div>
    <div id='net_change'>0.3 - 0.6%</div>
    <div id='Volume'>2800</div>
  </li>
  <li>
    <div id='title'>FB3</div>
    <div id='price'>200</div>
    <div id='net_change'>0.3 - 0.6%</div>
    <div id='Volume'>2800</div>
  </li>
</ul>