按类别划分为三类？

我有一组div我需要分为三类。他们现在这个样子 -按类别划分为三类？

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

我看到了一些解决方案，使用的排序（排序分为两个部分）和append（），但我可以对三个部分找不到任何东西。

来源

2016-03-10 Davez01d

的〔基于属性 '数据排序' 中Jquery的排序的div？]（可能的复制http://stackoverflow.com/questions/6133723/sort-divs-in- jquery-based-on-attribute-data-sort），这与“class”属性相同 – WcPc

这里就介绍如何使用jQuery解决这个小例子和两个简单的for循环。 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>

来源

2016-03-10 22:55:47

试试这个：

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>

来源

2016-03-10 22:52:07 kapantzak

按类别划分为三类？

回答

相关问题