How to sort <ul><li>'s based on class with javascript?
<p>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.</p>

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

<p>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.</p>
