Nested lists and tinysort

Question

I'm currently searching for a solution for sorting a nested list with Tinysort.js

My HTML

<ul class="speechlev1">
  <li data-title="indo-european" data-ratio="48">Indo-European
    <ul class="speechlev2">
      <li data-title="albanian" data-ratio="100">Albanian</li>
      <li data-title="armenian" data-ratio="75">Armenian</li>
      <li data-title="balto-slavic" data-ratio="75">Balto-Slavic</li>
      <li data-title="celtic" data-ratio="34">Celtic</li>
      <li data-title="germanic" data-ratio="78">Germanic</li>
      <li data-title="greek-phrygian" data-ratio="23">Greek-Phrygian</li>
      <li data-title="tokharian" data-ratio="0">Tokharian</li>
    </ul>
  </li>
  <li data-title="nilo-saharan" data-ratio="43">Nilo-Saharan</li>
  <li ata-title="sepik" data-ratio="42">Sepik</li>
  <li data-title="sino-tibetan" data-ratio="28">Sino-Tibetan
    <ul class="speechlev2">
      <li data-title="chinese" data-ratio="13">Chinese</li>
      <li data-title="tibeto-burman" data-ratio="34">Tibeto-Burman</li>
    </ul>
  </li>
  <li data-title="uto-aztecan" data-ratio="60">Uto-Aztecan</li>
</ul>

Javascript

$(document).ready(function() {
  tinysort('.speechlev2>li',{attr:'data-ratio'});
});

Result:

Indo-European
    Tokharian
    Chinese
    Greek-Phrygian
    Celtic
    Tibeto-Burman
    Armenian
    Balto-Slavic
Nilo-Saharan
Sepik
Sino-Tibetan
    Germanic
    Albanian
Uto-Aztecan

Should be:

Indo-European
    Tokharian
    Greek-Phrygian
    Celtic
    Armenian
    Balto-Slavic
    Germanic
    Albanian
Nilo-Saharan
Sepik
Sino-Tibetan
    Chinese
    Tibeto-Burman
Uto-Aztecan

I have set up a CodePen to show my problem: http://codepen.io/anon/pen/QbPVox

My problem is that tinysort sorts the li also between different parents. How can I fix that

Can somebody help me with that?

Answer 1

Just sort each of your lists separately:

$(document).ready(function() {
  $('.speechlev2').each(function() {
    tinysort($('li', this), {attr:'data-ratio'});
  });
});