使用jquery根据它们的id更改div订单

Question

我在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> 

Answer 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

Answer 2

检查了这一点：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> 

Answer 3

鉴于您的数据基于整型，你需要的是升序排序，有一个整洁的方式来做到这一点与纯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> 

在“现代”的浏览器只适用不过。