Question

我使用这个问题（jQuery sort elements using data id）来完成我正在做的项目的大量工作。

最高投票回答提到使用jQuery;如果我需要在IE10及以下版本中使用它，则需要.data()。我没有在任何浏览器中测试它，但我发现它在IE11或Edge中不起作用。

以下是适用于我的Chrome浏览器中的jsfiddle：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

您可以使用

<head>
    <script>
        var str = document.location.protocol + '//' + document.location.host + '/';
        document.write('<base href="'+str+'">');
    </script>
</head>

Works in edge

Answer 3

您可以在不使用jQuery的情况下轻松地对HTML元素进行排序。只需使用内置的document.querySelectorAll函数选择HTML元素集合（作为节点列表），然后使用内置的Array.prototype.sort.apply(YourCollection,[SortFunction])在nodeList上调用Array对象的sort函数。 / p>

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>

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

3 个答案: