sort divs into three categories by class?

Question

I have a group of divs that I need sorted into three categories. They currently look like this -

<div class="offline"></div>
<div class="online"></div>
<div class="offline"></div>
<div class="offline"></div>
<div class="deleted"></div>
<div class="online"></div>
<div class="offline"></div>

And I need it to look like this -

<div class="online"></div>
<div class="online"></div>
<div class="offline"></div>
<div class="offline"></div>
<div class="offline"></div>
<div class="offline"></div>
<div class="deleted"></div>

I saw some solutions for sorting into two sections using sort() and append(), but I can't find anything for three sections.

Possible duplicate of [Sort Divs in Jquery Based on Attribute 'data-sort'?](http://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort), this works the same with the "class"-attribute — WcPc, Mar 10 '16 at 22:45

score 0 · Answer 1 · answered Mar 10 '16 at 22:52

Try this:

var set = [];
$('div').each(function() {
  var that = $(this);
  var cl = that.attr('class');
  if ($.inArray(cl, set) == -1) {
    set.push(cl);
  }
});
set.sort();

var div_0 = $('.' + set[0]).clone();
var div_1 = $('.' + set[1]).clone();
var div_2 = $('.' + set[2]).clone();
$('body').html('').append(div_2).append(div_1).append(div_0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="offline">offline</div>
<div class="online">online</div>
<div class="offline">offline</div>
<div class="offline">offline</div>
<div class="deleted">deleted</div>
<div class="online">online</div>
<div class="offline">offline</div>

oshell · Accepted Answer · 2016-03-10T23:01:28.423

Here a little example on how to solve this with jQuery and two simple for loops. jsfiddle

var scope = $('#scope');
var containers = $('div', scope);
var order = [
  'online',
  'offline',
  'deleted'
];

$(document).ready(function(){
    //clear current scope and append in loop
    scope.html('');
    for (i = 0; i < order.length; i++) { 
        for (j = 0; j < containers.length; j++) {
         if (containers.eq(j).hasClass(order[i])) {
               scope.append(containers.eq(j));
            }
       }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scope">
  <div class="offline">offline</div>
  <div class="online">online</div>
  <div class="offline">offline</div>
  <div class="offline">offline</div>
  <div class="deleted">deleted</div>
  <div class="online">online</div>
  <div class="offline">offline</div>
</div>

sort divs into three categories by class?

2 Answers2