How to sort <ul><li>'s based on class with javascript?

Question

I have a TODO list app with an Unordered list. Within it I have a few list items. The li classes are high,medium,low. I would like li's with the class high to be placed before li's with the class medium and last ones with low.

<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>

So the li with id of item4 should be first and then it should be item7 and then the li's with class low after.

Answer 1

Here's a pure JS version of @ŠimeVidas jQuery solution.

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]);
    }
}