Question

我有以下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进行排序，方法是先订购具有class =“red”的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>

帮助？感谢。

Answer 1

试试这个：

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

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

Demo

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

Answer 2

在html中添加2个按钮

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

附加点击处理程序......

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

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

排序功能

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

JS FIDDLE DEMO

Answer 3

按照PSL的回答，我不得不像{i>}那样将? 1 : -1添加到sortMe函数中：

$(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
  }

感谢Alex和Rejith回答了我的类似问题How to _prevent_ divs from appearing in random order

Answer 4

此处不需要排序。由于元素已经按照您需要的顺序排列，您可以在它们上面调用prependTo()，如下所示：

$('.red').prependTo('#container');

.red { color: #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>

使用Javascript / Jquery根据类名对DIV进行排序

4 个答案:

Demo