Sort UL numerically and alphabetically, using each items data-char value

Question

I'm wanting to sort this UL numerically and alphabetically, using each items data-char value.

Note: I'm only wanting to sort the parent UL, not the child UL elements.

<ul>
  <li data-char="w">
    <span>W</span>
    <ul>
      <li>WWWWWWWWWWWWWW</li>
    </ul>
  </li>
  <li data-char="5">
    <span>5</span>
    <ul>
      <li>55555555555555</li>
    </ul>
  </li>
   <li data-char="a">
    <span>A</span>
    <ul>
      <li>AAAAAAAAAAAAAA</li>
    </ul>
  </li>
    <li data-char="1">
    <span>1</span>
    <ul>
      <li>11111111111</li>
    </ul>
  </li>
</ul>

I'm able to accomplish this with jQuery by doing:

function sortCharLi(a, b) {

    var va = a.dataset.char.toString().charCodeAt(0),
        vb = b.dataset.char.toString().charCodeAt(0);

    // add weight if it's a number
    if (va < 'a'.charCodeAt(0)) va += 100;
    if (vb < 'a'.charCodeAt(0)) vb += 100;

    return vb < va ? 1 : -1;
}

$('ul > li').sort(sortCharLi).appendTo('ul');

But I'm needing to remove the jQuery dependency so that's not an option any more.

Any ideas how I may do this without jQuery?

JSBIN

Answer 1

You can get the ul using getElemetsByTagName and children li can be get from the element object using children property.

function order(ul) {
  // get html children elements of li
  // in case of ul children will be li
  // ` Array.from` will hell helps to convert them into array
  var elements = Array.from(ul.children);

  // sort them with the same code
  elements.sort(function(a, b) {
    var va = a.getAttribute('data-char').charCodeAt(0),
      vb = b.getAttribute('data-char').charCodeAt(0),
      charCA = 'a'.charCodeAt(0);

    // add weight if it's a number
    if (va < charCA) va += 100;
    if (vb < charCA) vb += 100;
    // just get the difference and return to sort them
    return va - vb;
  });

  // append back to update the order
  // forEach can be used to update since it's in array format
  elements.forEach(function(ele) {
    ul.appendChild(ele)
  });
}


// get ul tag from dom and pass as parameter
// although you can use id selector or querySelector, etc
// it depends up on your need, here you just need to pass the dom reference of `ul` to be sorted
order(document.getElementsByTagName('ul')[0]);

<ul>
  <li data-char="w">
    <span>W</span>
    <ul>
      <li>WWWWWWWWWWWWWW</li>
    </ul>
  </li>
  <li data-char="5">
    <span>5</span>
    <ul>
      <li>55555555555555</li>
    </ul>
  </li>
  <li data-char="a">
    <span>A</span>
    <ul>
      <li>AAAAAAAAAAAAAA</li>
    </ul>
  </li>
  <li data-char="1">
    <span>1</span>
    <ul>
      <li>11111111111</li>
    </ul>
  </li>
</ul>

---

UPDATE : If you want to use them in chain as in jQuery, then extend the prototype

NodeList.prototype.sortElements = function(custom) {
  // if custom sort function passed then sort based on that
  if (typeof custom === 'function')
    return [].slice.call(this).sort(custom);
  // otherwise apply sort method directly
  return [].slice.call(this).sort();
  // you can also use Array.from(this), which only works in latest browsers  
}

Array.prototype.updateOrder = function() {
  // iterate over array element
  this.forEach(function(ele) {
    // append to the parent element
    ele.parentNode.appendChild(ele);
  })
}

// sort them with the same code
function sortFn(a, b) {
  var va = a.getAttribute('data-char').charCodeAt(0),
    vb = b.getAttribute('data-char').charCodeAt(0),
    charCA = 'a'.charCodeAt(0);
  // add weight if it's a number
  if (va < charCA) va += 100;
  if (vb < charCA) vb += 100;
  // just get the difference and return to sort them
  return va - vb;
}


// get li elements which have `data-char` attribute
document.querySelectorAll('ul li[data-char]')
  .sortElements(sortFn) // call sortElements methods we defined with custom sort function
  .updateOrder(); // call updateOrder to update the order of element

<ul>
  <li data-char="w">
    <span>W</span>
    <ul>
      <li>WWWWWWWWWWWWWW</li>
    </ul>
  </li>
  <li data-char="5">
    <span>5</span>
    <ul>
      <li>55555555555555</li>
    </ul>
  </li>
  <li data-char="a">
    <span>A</span>
    <ul>
      <li>AAAAAAAAAAAAAA</li>
    </ul>
  </li>
  <li data-char="1">
    <span>1</span>
    <ul>
      <li>11111111111</li>
    </ul>
  </li>
</ul>

Answer 2

This function preserves your original sorter method. The function expects the ul element to be passed:

function sortThem(ul) {
    var nodes = Array.prototype.slice.call(ul.childNodes).filter(function(el) {
        // Could use QSA with scope depending on browser support here
        return el.tagName === 'LI';
    });

    nodes.sort(function(a, b) {
        var va = a.getAttribute('data-char').charCodeAt(0),
            vb = b.getAttribute('data-char').charCodeAt(0);

        // add weight if it's a number
        if (va < 'a'.charCodeAt(0)) va += 100;
        if (vb < 'a'.charCodeAt(0)) vb += 100;

        return vb < va ? 1 : -1;
    });

    nodes.forEach(function(node) {
        ul.appendChild(node);
    });
}