javascript - 如何使用 javascript 根据类对 进行排序？

Question

我有一个带有无序列表的 TODO 列表应用程序。在其中我有一些列表项。 li 类是高、中、低。我希望类(class)高的 li 排在类(class)中等的 li 和类(class)低的最后一个之前。

<ul id="tasks">
  <li id="item3" class="priority low"><span></span><a href="#" class="closex" onclick="removeItem('item3')"></a><span>This is a low priority task</span></li>
  <li id="item4" class="priority high"><></span><a href="#" class="closex" onclick="removeItem('item4')"></a><span>This is a high priority task</span></li>
  <li id="item5" class="priority low"><span></span><a href="#" class="closex" onclick="removeItem('item5')"></a><span>This is another Low</span></li>
  <li id="item7" class="priority medium"><span></span><a href="#" class="closex" onclick="removeItem('item7')"></a><span>And now a Medium</span></li>
</ul>

所以 id 为 item4 的 li 应该在前面，然后是 item7，然后是 class low 的 li。

Answer 1

这是@ŠimeVidas jQuery 解决方案的纯 JS 版本。

var tasks = document.querySelector('#tasks'),
    items = document.querySelectorAll('#tasks > li');

for (var i = 0, arr = ['high', 'medium', 'low']; i < arr.length; i++) {
    for (var j = 0; j < items.length; j++) {
        if (~(" " + items[j].className + " ").indexOf(" " + arr[i] + " "))
            tasks.appendChild(items[j]);
    }
}