Javascript / jQuery：根据数据属性值重新排序div

可能重复：
按数据属性的数值对元素进行排序

我想根据设置的数据属性重新组织div，范围从最高整数到最低。 现在，我将所有数据推送到一个数组并排序，但我不知道如何继续。 我如何使用它来重新组织父div中的div？

var prices = new Array(); $(this).children('.listing-item').each(function() { var price = parseInt($(this).attr('data-listing-price')); prices.push(price) }); prices.sort(function(a,b){return ba}); 

这给我一个像139,129,129,109,109,84这样的数组。 现在我的想法是使用这样的选择器再次遍历div：

 $('.listing-item[data-listing-price="' + prices[0] + '"]') 

但我不知道如何移动div（具有最高数据属性整数的div应该移到顶部等等。任何想法？

Answer 1

这是解决方案

HTML：

 
 
2
 
3
 
1
 
4
  

JS：

 var divList = $(".listing-item"); divList.sort(function(a, b){ return $(a).data("listing-price")-$(b).data("listing-price") }); $("#list").html(divList); 

的jsfiddle：

http://jsfiddle.net/bittu4u4ever/ezYJh/1/

Answer 2

 var s = new Array; var i = 0; var x = $(".ch").length; $(".ch").each( function() { s[i] = $(this).data("id"); i++; }); var g = s.sort(function(a,b){return ab}); for(var c = 0; c < x; c++) { var div = g[c]; var d = $(".ch[data-id="+div+"]").clone(); var s = $(".ch[data-id="+div+"]").remove(); $(".pa").append(d); } 

工作小提琴

Answer 3

您可以调整此处描述的function： 如何使用jQuery按字母顺序对列表进行排序？ 并只需更改排序function（’ < '）

 
 
30
 
62
 
11
 
43
  

在你的js（最高整数到最低）：

 var div = $('#foo'); var listitems = div.children('div.test').get(); listitems.sort(function (a, b) { return (+$(a).attr('data-listing-price') > +$(b).attr('data-listing-price')) ? -1 : (+$(a).attr('data-listing-price') < +$(b).attr('data-listing-price')) ? 1 : 0; }) $.each(listitems, function (idx, itm) { div.append(itm); }); 

http://jsfiddle.net/NfVxk/