JavaScript Sort DOM Elements

by Avinashullal

HTML

<ol class="columns">
  <li data-tag='z' data-char="y">y</li>
  <li data-tag='y' data-char="1">1</li>
  <li data-tag='x' data-char="a">a</li>
  <li data-tag='w' data-char="e">e</li>
  <li data-tag='v' data-char="c">c</li>
  <li data-tag='u' data-char="w">w</li>
  <li data-tag='t' data-char="0">0</li>
  <li data-tag='s' data-char="9">9</li>
  <li data-tag='r' data-char="g">g</li>
</ol>

JavaScript

$(".columns li").sort(sort_li).appendTo('.columns');

function sort_li(a, b){
    var va = $(a).data('tag').toString().charCodeAt(0);
    var vb = $(b).data('tag').toString().charCodeAt(0);
    if (va < 'a'.charCodeAt(0)) va += 100;
    if (vb < 'a'.charCodeAt(0)) vb += 100;
    return vb < va ? 1 : -1;   
}