David.J David.J - 7 months ago 36
Javascript Question

jQuery reorder list items based on class

Is there a simple way to reorder my list items using a class?

I want to specify a class to feature those items at the top of the list first, with other list items listed below.

<ul class="order-me">
<li class="">normal content</li>
<li class="">normal content</li>
<li class="featured">featured content</li>
<li class="">normal content</li>
<li class="featured">featured content</li>
<li class="">normal content</li>
<li class="">normal content</li>
</ul>


Desired output:

<ul class="order-me">
<li class="featured">featured content</li>
<li class="featured">featured content</li>
<li class="">normal content</li>
<li class="">normal content</li>
<li class="">normal content</li>
<li class="">normal content</li>
<li class="">normal content</li>
</ul>


Thanks!

Answer

You can prepend the .featured elements to their containing ul to move them to the top of the list. Try this:

$('.featured').prependTo('.order-me');

Example fiddle