在JQuery中对元素列表进行排序

我有一个使用JQuery获得的元素列表。

var $self = $(this); var $fields = $('.identifier-controls', $self); 

此列表是控件呈现时需要以某种方式操作的元素列表。 $ fields列表中的每个元素都包含一个名为“data-order”的数据属性。 这个属性告诉我应该在控件中安排元素的顺序（啊要求）。 顺序不必是直接线性顺序（意味着第一个控件的属性值为10，下一个控件的属性值为15，下一个控制器等等。它们只需要以asc顺序出现。是否有一个简单的实现这一目标的方法？我能提出的所有方法看起来有点过于复杂。

Answer 1

试试这个：

 $(function(){ var $self = $(this); var sortedList = $('.identifier-controls', $self).sort(function(lhs, rhs){ return parseInt($(lhs).attr("data-order"),10) - parseInt($(rhs).attr("data-order"),10); }); }); 

变量sortedList现在具有已排序的元素。

Answer 2

在搜索了许多解决方案之后，我决定在博客中介绍如何在jquery中进行排序 。 总之，按数据属性对jquery“类数组”对象进行排序的步骤……

1. 通过jquery选择器选择所有对象
2. 转换为实际数组（不是类似数组的jquery对象）
3. 对对象数组进行排序
4. 使用dom对象数组转换回jquery对象

HTML

  
 2 
 
 1 
 
 4 
 
 3  

普通的jquery选择器

 $('.item'); 

 [
 2 ，
  
 1 ，
  
 4 ，
  
 3 
 ] 

让我们按数据顺序对此进行排序

  function getSorted（selector，attrName）{
     return $（$（selector）.toArray（）。sort（function（a，b）{
         var aVal = parseInt（a.getAttribute（attrName）），
             bVal = parseInt（b.getAttribute（attrName））;
        返回aVal  -  bVal;
     }））;
 } 

 > getSorted('.item', 'data-order') 

 [
 1 ，
  
 2 ，
  
 3 ，
  
 4 
 ] 

了解getSorted（）的工作原理。

希望这可以帮助！

Answer 3

就像是：

 $fields.sort(function(a, b) { return a.getAttribute('data-order') > b.getAttribute('data-order'); }).appendTo($fields.parent()); 

小提琴： http ： //jsfiddle.net/gCFzc/

Answer 4

插入排序是一种相当直接的方式。

或者有点颠覆性，你可以利用JavaScript引擎：

 var $fields, $container, sorted, index; $container = $('body'); $fields = $("div[data-order]", $container); sorted = []; $fields.detach().each(function() { sorted[parseInt(this.getAttribute("data-order"), 10)] = this; }); sorted.forEach(function(element) { $container.append(element); }); 

实例：

 (function($) { var $fields, $container, sorted, index; $container = $('body'); $fields = $("div[data-order]", $container); sorted = []; $fields.detach().each(function() { sorted[parseInt(this.getAttribute("data-order"), 10)] = this; }); sorted.forEach(function(element) { $container.append(element); }); })(jQuery); 

 
30
 
40
 
10
 
20
 
1