jQuery addClass example

Change class name on click in jQuery

by Camila Marqui

HTML

<ol class="pecas">
  <li class="foto" data-char="a20">a20</li>
  <li class="foto" data-char="a18">a18</li>
  <li class="foto" data-char="c8">c8</li>
  <li class="foto" data-char="a8">a8</li>
  <li class="foto" data-char="a2">a2</li>
  <li class="foto" data-char="a7">a7</li>
  <li class="foto" data-char="b1">b1</li>
  <li class="foto" data-char="c2">c2</li>
  <li class="foto" data-char="b13">b13</li>
</ol>

CSS

li{list-style:none}

JavaScript

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

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