Question

我目前正在寻找使用Tinysort.js

对嵌套列表进行排序的解决方案

我的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'});
});

结果：

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

应该是：

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

我已经设置了CodePen来显示我的问题： http://codepen.io/anon/pen/QbPVox

我的问题是，tinysort还在不同的父母之间对李进行了分类。我该如何解决？

有人可以帮我吗？

Answer 1

只需分别对每个列表进行排序：

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

嵌套列表和tinysort

1 个答案: