Javascript/jQuery：根据数据属性值重新排序 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14438439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript/jQuery: Reordering divs according to data-attribute values
提问by Galadre
Possible Duplicate:
Sort element by numerical value of data attribute
可能的重复：
按数据属性的数值对元素进行排序
I want to reorganize divs according to a data attribute set on them, ranging from highest integer to lowest. Right now, I push all the data into an array and sort that but I'm not sure how to proceed. How can I use this to reorganize divs inside their parent 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 b-a});
This gets me an array like 139,129,129,109,109,84 for example. Now my idea was to loop through the divs another time with a selector like this:
例如，这让我得到一个像 139,129,129,109,109,84 这样的数组。现在我的想法是使用这样的选择器再次循环遍历 div：
$('.listing-item[data-listing-price="' + prices[0] + '"]')
but I'm not sure how to move the divs (the div with the highest data-attribute integer should move to the top and so on. Any idea?
但我不确定如何移动 div（具有最高数据属性整数的 div 应该移动到顶部等等。知道吗？
回答by Sandeep
Here is the solution
这是解决方案
HTML:
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:
JS：
var divList = $(".listing-item");
divList.sort(function(a, b){
return $(a).data("listing-price")-$(b).data("listing-price")
});
$("#list").html(divList);
JSFiddle:
JSFiddle：
回答by Heart
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);
}
回答by JohnJohnGa
You can adapt the function described here: How may I sort a list alphabetically using jQuery?and just change the sort function ('<')
您可以调整此处描述的功能：如何使用 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>
In your js (highest integer to lowest):
在您的 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); });
