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

我有以下HTML结构：

 
1
 
2
 
3
 
4
 
5
 
6
 
7
  

我想运行一些Jquery，它将对div容器内的div进行排序， 首先排序具有class =“red”的div，然后排序那些没有的div，所以最终的结构应该是：

 
 
2
 
3
 
6
 
1
 
4
 
5
 
7
  

救命？ 谢谢。

Answer 1

试试这个：

  $(function(){ var elem = $('#container').find('div').sort(sortMe); $('#container').append(elem); }); function sortMe(a, b) { return a.className < b.className; } 

演示

使用一些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); }); })(); 

演示

Answer 2

在你的html中添加2个按钮

 SORT UNSORT 

附上点击处理程序……

 $('.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

 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的回答，我不得不补充一下? 1 : -1 ? 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回答了我的类似问题如何_prevent_ divs以随机顺序出现

Answer 4

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

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

 .red { color: #C00; } 

  
 
1
 
2
 
3
 
4
 
5
 
6
 
7