Javascript/jQuery：根据数据属性值重新排序 div [重复]答案

【问题标题】：Javascript/jQuery: Reordering divs according to data-attribute values [duplicate]Javascript/jQuery：根据数据属性值重新排序 div [重复]
【发布时间】：2013-01-21 12:16:50
【问题描述】：

可能重复：
Sort element by numerical value of data attribute

我想根据它们上设置的数据属性重新组织 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 应该移动到顶部等等。有什么想法吗？

【问题讨论】：

嗯...你是对的哈哈。非常感谢，很抱歉在我发布之前我没有看到那个。

标签： javascript jquery arrays

【解决方案1】：

解决办法

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

JSFiddle：

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

【讨论】：

回调应该返回一个负数、正数或0，而不是布尔值。
已更新。但两种方式都有效...... ;)
仅返回布尔值似乎可以工作，具体取决于数据（和算法），您可能会得到意想不到的结果（因为您使 a 始终等于或大于b，但永远不会更小）。阅读有关Array.sort 的更多信息。
谢谢，这很好用！正如菲利克斯所说，这个问题有点重复，但这个答案仍然比使用另一个问题的答案更有帮助。
哦，顺便说一句，你不应该使用.html。我希望 jQuery 检测到这一点，但在最坏的情况下，它会将所有 DOM 元素序列化为 HTML 并将它们转换回 DOM 元素。您将丢失绑定到元素的所有数据和事件处理程序。只需改用.append。

【解决方案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 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);
}

Working Fiddle

【讨论】：

【解决方案3】：

您可以调整此处描述的函数：How may I sort a list alphabetically using 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/

【讨论】：

回调应该返回一个负数、正数或0，而不是布尔值。 a 和 b 都没有 data-listing-price 属性。这不是数据属性的工作方式。您必须通过.dataset 属性或使用getAttribute（当然是jQuery）来访问它们。
使用<仍然是错误的，阅读更多关于Array.sort的信息。
a 或 b 是，但 $(a) 和 $(b) 具有 data-listing-price 属性
> 也是错误的......你必须返回一个正数或负数或0，而不是布尔值。这就是约瑟夫在原始答案中使用- 的原因。老实说，我认为他的回答没有任何重复之处。我希望你投票结束这个问题至少是重复的。