Javascript 按字符串属性排序元素不起作用

Question

我想使用以下代码对 div 中的图像(按文件名)进行排序:

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

为了区分文件名和路径，我将文件名复制到data-filename属性中，然后在JS中通过dataset.filename获取。

结果如下:

<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">

问题是为什么？例如，为什么“Vista (81).png”跟在“Vista (92).png”之后？

更新

我根据这个答案做了我的排序程序:https://stackoverflow.com/a/13490529/259731 (实际代码:http://jsfiddle.net/CFYnE/)。如果像 zvona 测试的那样，strings 排序正常，那么他们的 element 排序代码和我的有什么区别？图片已加载。

Answer 1

传递给 Sort 方法的比较函数格式不正确。

根据MDN ，它应该是以下格式:

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;
} 

由于您的方法只返回逻辑比较的结果(true 或 false)，您只是向排序方法表明图像相等(当您的比较返回 false 时)或“大于”(当您的比较返回 false 时)返回真)。

您可以将排序方法更改为以下，您应该会看到正确的结果:

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

希望这对您有所帮助!