сортировать divs на три категории по классам?

Question

У меня есть группа разделов, которые мне нужно отсортировать по трем категориям. Они в настоящее время выглядит следующим образом -

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

И мне нужно, чтобы это выглядело, как это -

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

Я видел некоторые решения для сортировки на две секции с помощью своего рода() и добавить(), но я не могу ничего не найти для трех секций.

Answer 1

Вот небольшой пример того, как решить эту проблему с JQuery и две простые для петель. 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++) { 
 
    \t  if (containers.eq(j).hasClass(order[i])) { 
 
     \t   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>

Answer 2

Попробуйте это:

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>