CODEWITHSUNDEEP
javascriptsorting
noober
noober

Reputation: 4938

Javascript sorting elements by string attribute not working

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.

Upvotes: 1

Views: 178

Answers (2)

Jake
Jake

Reputation: 690

After fiddling around with this for some time, I can only conclude that this is weird as hell. The only reason I can think of 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?

Upvotes: 1

Code Monkey
Code Monkey

Reputation: 1835

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!

Upvotes: 3

Related Questions