Using .sort() and .data() to sort HTML elements in IE11 and Edge

Question

I used this question (jQuery sort elements using data id) to get a lot of work done on a project I'm doing.

The top voted answer mentions that using jQuery;s .data() is required if I need it to work in IE10 and below. I haven't tested it in any of those browsers, but I have found that it does not work in IE11 or Edge.

Here's the jsfiddle that works just fine in Chrome for me: 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');

Can you explain how it fails? As in does it not sort at all, is there an error message? — Travis J
– Travis J, Commented Dec 7, 2015 at 21:03
It doesn't sort at all for me. No error message in the console or anything. — jkupczak
– jkupczak, Commented Dec 7, 2015 at 21:15

Jacob · Accepted Answer · 2015-12-07 21:26:56Z

4

The sort function is bad; I'm not sure why it works for any other browser. Working JSFiddle:

http://jsfiddle.net/0m75k1fm/

The sort function should return a number, not a boolean:

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

edited Dec 7, 2015 at 21:26

answered Dec 7, 2015 at 21:15

Jacob

79k24 gold badges159 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Jacob Over a year ago

Looks like IE can handle the missing quotes; it's just the sort function that is specifically tripping it up.

dfsq Over a year ago

Basically you didn't change anything. Quotes are optional in this case and > handles to number conversion behind the scene.

Travis J Over a year ago

The attributes are not malformed. Yes, changing it to subtract does help because the compareFunction expects an integer but it doesn't really answer the question.

Jacob Over a year ago

@dfsq: look carefully.

Jacob Over a year ago

@dfsq: Sort functions should return -1, 0, or 1 to indicate ordering. Just because JS can convert Boolean to Number doesn't mean the sort function is correct.

|

Evgeny · Accepted Answer · 2015-12-07 21:22:59Z

2

You can use

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

Works in edge

edited Dec 7, 2015 at 21:22

answered Dec 7, 2015 at 21:03

Evgeny

1131 silver badge7 bronze badges

1 Comment

Travis J Over a year ago

Did you test this in IE11 and Edge?

Thriggle · Accepted Answer · 2018-05-01 22:19:17Z

You can sort HTML elements pretty easily without jQuery. Just use the built in document.querySelectorAll function to select your collection of HTML elements (as a nodelist) and then use the built in Array.prototype.sort.apply(YourCollection,[SortFunction]) to invoke the Array object's sort function on your nodeList.

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>

Collectives™ on Stack Overflow

Using .sort() and .data() to sort HTML elements in IE11 and Edge

3 Answers 3

12 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related