使用Javascript/Jquery根据类名排序div

我有以下HTML结构：

<div id="container">
    <div>1</div>
    <div class="red">2</div>
    <div class="red">3</div>
    <div>4</div>
    <div>5</div>
    <div class="red">6</div>
    <div>7</div>
</div>

1.
2.
3.
4.
5.
6.
7.

我并不是要运行一些Jquery，它将通过先排序具有class=“red”的div，然后排序不具有class=“red”的div来对div容器中的div进行排序，因此最终的结构应该是：

<div id="container">
    <div class="red">2</div>
    <div class="red">3</div>
    <div class="red">6</div>
    <div>1</div>
    <div>4</div>
    <div>5</div>
    <div>7</div>
</div>

2.
3.
6.
1.
4.
5.
7.

帮忙？谢谢。

试试这个：

 $(function(){
   var elem = $('#container').find('div').sort(sortMe);
   $('#container').append(elem);
 });

 function sortMe(a, b) {
        return a.className < b.className;
  }

---

在html中添加2个按钮

<button class="sort">SORT</button>
<button class="unsort">UNSORT</button>

排序功能

function doSort(a, b) {
 return a.className < b.className;
}

function doUnsort(a, b) {
   var a = $(a).text().toUpperCase();
   var b = $(b).text().toUpperCase();
   return (a < b) ? -1 : (a > b) ? 1 : 0;
}

函数doSort（a，b）{
返回a.classNameb）－1:0；
}

---

在PSL的回答之后，我不得不添加

？1:-1

到排序功能，如下所示：

$(function(){
   var elem = $('#container').find('div').sort(sortMe);
   $('#container').append(elem);
 });

 function sortMe(a, b) {
        return a.className < b.className ? -1 : 1; // This is the added code
  }

$（函数（）{
var elem=$（'#container'）.find（'div'）.sort（sortMe）；
$（“#容器”）.append（elem）；
});
功能排序（a，b）{
返回a.className

---

感谢Alex和Rejith回答了我类似的问题，这里不需要排序。由于元素已经按照您需要的顺序排列，您可以对它们调用

prependTo（）

，如下所示：

$（'.red'）.prependTo（'#container'）
.red{color:#C00；}

1.
2.
3.
4.
5.
6.
7.
如果通过某种形式的动画完成重新排序，则可获得额外的积分，以使用户清楚地看到div顺序已更改。谢谢。你能把你写的JavaScript/jQuery发出来吗？只是好奇而已。首先，你为什么要这样安排？奖励积分？同样适用于你，如果你试着自己做一些事情，在发布之前，这很有效，谢谢！有可能使它与第二个类名一起工作吗？谢谢
function doSort(a, b) {
 return a.className < b.className;
}

function doUnsort(a, b) {
   var a = $(a).text().toUpperCase();
   var b = $(b).text().toUpperCase();
   return (a < b) ? -1 : (a > b) ? 1 : 0;
}

$(function(){
   var elem = $('#container').find('div').sort(sortMe);
   $('#container').append(elem);
 });

 function sortMe(a, b) {
        return a.className < b.className ? -1 : 1; // This is the added code
  }