Javascript sorting elements by string attribute not working

Question

I want to sort images (by filename) inside a div using this code:

$('#div img').sort(function (a, b)
{
    return a.dataset.filename > b.dataset.filename;
}).appendTo('#div');

To distinguish filenames and paths, I copy filenames in data-filename attribute, then get them via dataset.filename in JS.

The result is the following:

<img data-filename="Vista (92).png" src="../../images/gallery/Vista (92).png">
<img data-filename="Vista (81).png" src="../../images/gallery/Vista (81).png">
<img data-filename="Vista (93).png" src="../../images/gallery/Vista (93).png">
<img data-filename="Vista (83).png" src="../../images/gallery/Vista (83).png">
<img data-filename="Vista (82).png" src="../../images/gallery/Vista (82).png">
<img data-filename="Vista (95).png" src="../../images/gallery/Vista (95).png">
<img data-filename="Vista (86).png" src="../../images/gallery/Vista (86).png">
<img data-filename="Vista (84).png" src="../../images/gallery/Vista (84).png">
<img data-filename="Vista (85).png" src="../../images/gallery/Vista (85).png">
<img data-filename="Vista (90).png" src="../../images/gallery/Vista (90).png">
<img data-filename="Vista (91).png" src="../../images/gallery/Vista (91).png">
<img data-filename="Vista (94).png" src="../../images/gallery/Vista (94).png">
<img data-filename="about.png" src="../../images/gallery/about.png">
<img data-filename="dictionary.png" src="../../images/gallery/dictionary.png">
<img data-filename="ink.png" src="../../images/gallery/ink.png">
<img data-filename="library.png" src="../../images/gallery/library.png">
<img data-filename="transflash.png" src="../../images/gallery/transflash.png">

The question is WHY? Why, for instance, 'Vista (81).png' follows 'Vista (92).png'?

UPDATE

I did my sorting routine according to this answer: https://stackoverflow.com/a/13490529/259731 (the code in action: http://jsfiddle.net/CFYnE/). If sorting of strings is OK as zvona tested, what is the difference between their element sorting code and mine? Images are loaded.

I tried: ["Vista (92).png", "Vista (81).png", "Vista (93).png"].sort(function(a,b) { return a > b;}); and it works just fine. There's something else that's not working in your code? — Samuli Hakoniemi, Jan 23 '14 at 09:55
@zvona agreed. Are the images loading? have you tried adding a closing `/` to the `img` tag? — Adam Hopkinson, Jan 23 '14 at 10:00
@Lior Sorting of strings is OK. Sorting of elements (img) is obviously not. — noober, Jan 23 '14 at 10:07
Your code works just fine here: http://jsfiddle.net/e3taH/2/ (http://i.imgur.com/5D510dW.png). What browser are you testing on? — Victor Stanciu, Jan 23 '14 at 10:17
@VictorStanciu Wow! I've got it! Your fiddle (and the previous one) I saw in FF, since FF is my working browser for reading the web. I bet you're using it too. But my code is written for Webkit and if you open the fiddle in Chrome, you'll see it's corrupted in the same manner. — noober, Jan 23 '14 at 10:29

score 3 · Accepted Answer · answered Jan 23 '14 at 10:29

The comparison function you are passing the Sort method is not properly formed.

According to the MDN, it should be of the following format:

function(a, b) {
  if (a is less than b by some ordering criterion)
     return -1;
  if (a is greater than b by the ordering criterion)
     return 1;
  // a must be equal to b
  return 0;
}

Since your method only returns the result of a logical comparison (true or false), you are only indicating to the sort method that the images are either equal (when your comparison returns false) or "greater than" (when your comparison returns true).

You can change your sort method to the following and you should see the correct results:

function (a, b) {
    if (a.dataset.filename < b.dataset.filename) return -1;
    if (a.dataset.filename > b.dataset.filename) return 1;
    return 0;
}

Hope this helps!

Chrome is like an anonymous — it doesn't forgive (improperness in this case). — noober, Jan 23 '14 at 10:35

score 1 · Answer 2 · answered Jan 23 '14 at 10:20

After fiddling around with this for some time I can only conclude that this is weird as fuck. The only reason I can think if is that the img tag is special in the sense that it does not require closing, and that this confuses the sorting-function/dom-placement somehow.

I know it's not a great answer, but could you just wrap your images in divs, and sort the divs instead?

Javascript sorting elements by string attribute not working

2 Answers2