Tinysort #125

by abubelinha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<ul class="memberlist">
   <li>
     <a class="function">ZZZ</a>
   </li>
   <li>
     <a class="class">XXX</a>
      <ul class="memberlist">
      <li>
        <a class="function">FFF (should be kept inside parent XXX)</a>
      </li>
      <li>
        <a class="variable">BBB (should be kept inside parent XXX)</a>
      </li>
      </ul>
   </li>
   <li>
     <a class="class">AAA</a>
      <ul class="memberlist">
      <li>
        <a class="variable">ZZZ (should be kept inside parent AAA)</a>
      </li>
      <li>
        <a class="function">EEE (should be kept inside parent AAA)</a>
      </li>
      </ul>
   </li>
</ul>
<button id="AZ">sort A-Z</button>
<button id="ZA">sort Z-A</button>
<button id="original">original order</button>

JavaScript

//var listElements = document.querySelectorAll('li, .class, .memberlist, .variable, .function');
var listElements = document.querySelectorAll('li');
console.log(listElements);
for (var i = 0, l = listElements.length; i < l; i++) {
  listElements[i].setAttribute('value', i);
}
document.getElementById('AZ').addEventListener('click', function() {
  tinysort('ul.memberlist>li>ul>li');
});
document.getElementById('ZA').addEventListener('click', function() {
  tinysort('ul.memberlist>li>ul>li',{order:'desc'});
});

document.getElementById('original').addEventListener('click', function() {
  tinysort('ul.memberlist>li',{attr:'value'});
});