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

我想运行一些 Jquery，通过对 div 进行排序来对 div 容器内的 div 进行排序first有 class="red" 的，然后是没有 class="red" 的，所以最终的结构应该是：

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

帮助？谢谢。

尝试这个：

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

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

Demo http://jsfiddle.net/zyEwF/

和一些fadeIn/fadeout动画片

var elem = $('#container').find('div').sort(sortByClass);

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

 var allElem = elem.get();
  (function append() {

    var $this = $(allElem.shift());

     $('#container').append(
                $this.fadeOut('slow'))
                         .find($this)
                             .fadeIn('slow', function () {
                                      if (allElem.length > 0) 
                                          window.setTimeout(append);
                            });
      })();

Demo http://jsfiddle.net/JKfZS/