我在HTML页面中有无序div,需要根据其ID按升序排列。 我有一些代码,但它不工作我只是想知道代码有什么问题,或者我需要做更多的代码工作。 fiddle
Jquery的
$('div').sort(function (a, b) {
var contentA =parseInt( $(a).attr('data-sort'));
var contentB =parseInt( $(b).attr('data-sort'));
return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
})
HTML
<div data-sort='14'>14</div>
<div data-sort='6'>6</div>
<div data-sort='9'>9</div>
答案 0 :(得分:1)
使用:
var asc=false;
var sorted=$('div').sort(function(a,b){
return (asc ==
($(a).data('sort') < $(b).data('sort'))) ? 1 : -1;
});
asc = asc ? false : true;
$('body').html(sorted);
<强> Working Demo 强>
答案 1 :(得分:1)
鉴于您的数据是基于整数的,并且您需要的排序是升序,有一个简洁的方法来执行纯css:)
只需将您的数据div放在父Flexbox容器中,并使您的排序整数成为css顺序属性,就像这样......
<div id="container" style="display:flex">
<div style="order:14">14</div>
<div style="order:6">6</div>
<div style="order:9">9</div>
</div>
仅适用于&#39;现代&#39;浏览器。
答案 2 :(得分:0)
检查出来:http://jsfiddle.net/en107qxb/5/
function sortUsingText(parent, childSelector) {
var items = parent.children(childSelector).sort(function(a, b) {
var vA = $(a).text();
var vB = $(b).text();
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
}
sortUsingText($('#sortThis'), "div");
function sortUsingData(parent, childSelector) {
var items = parent.children(childSelector).sort(function(a, b) {
var vA = $(a).data('sort');
var vB = $(b).data('sort');
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
parent.append(items);
}
sortUsingData($('#sortThisData'), "div");
<强> HTML 强>
<div id="sortThis">
<div>3</div>
<div>1</div>
<div>2</div>
</div>
<div id="sortThisData">
<div data-sort="7">High</div>
<div data-sort="2">Low</div>
<div data-sort="5">Mid</div>
</div>