17

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

我想根据它们上设置的数据属性重新组织 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 b-a});

例如，这让我得到一个像 139,129,129,109,109,84 这样的数组。现在我的想法是使用这样的选择器再次循环遍历 div：

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

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

4

3 回答 3

36

这是解决方案

HTML：

<div id="list">
  <div class="listing-item" data-listing-price="2">2</div>
  <div class="listing-item" data-listing-price="3">3</div>
  <div class="listing-item" data-listing-price="1">1</div>
  <div class="listing-item" data-listing-price="4">4</div>
</div>

JS：

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

JSF中：

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

于 2013-01-21T12:33:24.153 回答
0 
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 a-b});
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);
}

工作小提琴

于 2013-01-21T12:31:57.877 回答
-1

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

<div id="foo">
    <div class="test" data-listing-price="30">30</div>
    <div class="test" data-listing-price="62">62</div>
    <div class="test" data-listing-price="11">11</div>
    <div class="test" data-listing-price="43">43</div>
</div>

在您的 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/

于 2013-01-21T12:30:12.513 回答