使用每个项目data-char值以数字和字母顺序对UL进行排序

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);
    });
}

Answer 3

You may use querySelectorAll for $('ul > li') . Pay attention, the right selector should be $('ul > li[data-char]') because you are inrested only in li tags having the data-char as attribute.

To convert the NodeList returned from querySelectorAll to array you can use Array.from .

To substitute the appendTo you may use forEach .

So the code could be:

 function sortCharLi(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; } window.onload = function() { // $('ul > li').sort(sortCharLi).appendTo('ul'); Array.from(document.querySelectorAll('ul > li[data-char]')).sort(sortCharLi).forEach(function(element, index) { element.parentNode.appendChild(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> 

UPDATE A shorter way to convert:

$('ul > li[data-char]').sort(sortCharLi).appendTo('ul');

to pure javaScript can be:

document.querySelectorAll('ul > li[data-char]').sort(sortCharLi).replaceWith();

In order to achieve this result the following methods have to be added:

NodeList.prototype.sort = function(callBack) {
    if (typeof callBack === 'function') {
        return [].slice.call(this).sort(callBack);
    } else {
        return [].slice.call(this).sort();
    }
}

Array.prototype.replaceWith = function() {
    this.forEach(function(element, index) {
        element.parentNode.appendChild(element);
    });
    return this;

}

In this way there exist the possibility to chain methods like in jQuery:

 function sortCharLi(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; } NodeList.prototype.sort = function(callBack) { if (typeof callBack === 'function') { return [].slice.call(this).sort(callBack); } else { return [].slice.call(this).sort(); } } Array.prototype.replaceWith = function() { this.forEach(function(element, index) { element.parentNode.appendChild(element); }); return this; } window.onload = function () { document.querySelectorAll('ul > li[data-char]').sort(sortCharLi).replaceWith(); } 

 <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 4

This is the best answer I can snap off from work, but it might need to be tailored to your html structure.

FUNCTION TO SORT UL WITHOUT JQUERY:

function sortUnorderedList(ul, sortDescending) {
 if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Idiot-proof, remove if you want
  if(!ul) {
    alert("The UL object is null!");
    return;
  }

  // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

 // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

 // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

USAGE:

sortUnorderedList("ID_OF_LIST");