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测试时字符串的排序正常，那么他们的元素排序代码和我的排序代码有什么区别？图像已加载。

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），因此您只向sort方法指示图像相等（当您的比较返回false时）或“大于”（当您的比较时）返回true）。

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

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

希望这有帮助！

Answer 2

在摆弄了一段时间之后，我只能得出结论，这就像他妈的一样奇怪。我可以想到的唯一原因是img标签是特殊的，因为它不需要关闭，并且这会以某种方式混淆排序函数/ dom-placement。

我知道这不是一个很好的答案，但你可以将你的图像包装成div，然后对div进行排序吗？

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

2 个答案: