CODEWITHSUNDEEP
jquerylisthtml-lists
wbdlc
wbdlc

Reputation: 1089

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!

Upvotes: 7

Views: 4406

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337713

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');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Upvotes: 13

Kyzer
Kyzer

Reputation: 568

To add to @Rory McCrossan's answer, I've added the ability to sort it with navigation buttons

$("ul.order-nav li").click(function() {
  // Find the Data attribute from unordered list [.order-nav]
  var sortClass = '.' + $(this).data('sort-by');
  // Prepent the [li] with matching class to top of [ul]
  $(sortClass).prependTo('.order-me');
});

Here is the Fiddle

Upvotes: 1

Related Questions