使用.sort（）和.data（）對IE11和Edge中的HTML元素進行排序

Question

我使用這個問題（ 使用數據id的jQuery排序元素 ）來完成我正在做的項目的大量工作。

最高投票回答提到使用jQuery;如果我需要它在IE10及以下版本中工作，則需要s .data() 。 我沒有在任何瀏覽器中測試它，但我發現它在IE11或Edge中不起作用。

這里的jsfiddle在我的Chrome中運行得很好： http ： //jsfiddle.net/4o771n7o/

HTML

<div class="clist">
    <div data-sid=1>1</div>
    <div data-sid=4>4</div>
    <div data-sid=3>3</div>
    <div data-sid=1>1</div>
    <div data-sid=4>4</div>
    <div data-sid=2>2</div>
    <div data-sid=1>1</div>
</div>

使用Javascript

$('.clist div').sort(function(a,b) {
     return $(a).data('sid') > $(b).data('sid');
}).appendTo('.clist');

Answer 1

排序功能不好; 我不確定為什么它適用於任何其他瀏覽器。 工作JSFiddle：

http://jsfiddle.net/0m75k1fm/

sort函數應返回一個數字，而不是布爾值：

$('.clist div').sort(function(a,b) {
     return parseInt($(a).data('sid'), 10) - parseInt($(b).data('sid'), 10);
}).appendTo('.clist');

Answer 2

您可以使用

$('.clist div').sort(function(a,b) {
     return $(a).attr('data-sid') > $(b).attr('data-sid') ? 1 : -1;
}).appendTo('.clist');

在邊緣工作

Answer 3

沒有jQuery，您可以非常輕松地對HTML元素進行排序。 只需使用內置的document.querySelectorAll函數來選擇HTML元素的集合（作為nodelist），然后使用內置的Array.prototype.sort.apply(YourCollection,[SortFunction])來調用Array對象的sort函數。節點列表。

 var nodes = document.querySelectorAll(".clist [data-sid]"); Array.prototype.sort.apply(nodes, [function(first, second) { var a = +first.getAttribute("data-sid"), b = +second.getAttribute("data-sid"); return a > b ? 1 : (a < b ? -1 : 0); }]); for (i = 0, len = nodes.length; i < len; i++) { document.querySelector(".clist").appendChild(nodes[i]); } 

 [data-sid] { border: 1px solid black; } [data-sid="1"] { background-color: rgb(255, 250, 250); } [data-sid="2"] { background-color: rgb(255, 200, 200); } [data-sid="3"] { background-color: rgb(255, 100, 100); } [data-sid="4"] { background-color: rgb(255, 50, 50); } 

 <div class="clist"> <div data-sid=1>1</div> <div data-sid=4>4</div> <div data-sid=3>3</div> <div data-sid=1>1</div> <div data-sid=4>4</div> <div data-sid=2>2</div> <div data-sid=1>1</div> </div>