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

我想使用以下代码在div中按文件名对图像进行排序：

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

为了区分文件名和路径，我复制了datafilename属性中的文件名，然后通过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”后面

更新

---

我根据以下答案执行了排序例程：运行中的代码：。如果字符串的排序和zvona测试一样正常，那么它们的元素排序代码和我的有什么区别？图像已加载。

在摆弄了一段时间后，我只能断定这像他妈的一样奇怪。我认为if的唯一原因是img标记在某种意义上是特殊的，它不需要关闭，并且这在某种程度上混淆了排序函数/dom的位置

---

我知道这不是一个很好的答案，但是你能不能把你的图片用div包装起来，然后对div进行排序呢？

在处理了一段时间后，我只能得出结论，这很奇怪。我认为if的唯一原因是img标记在某种意义上是特殊的，它不需要关闭，并且这在某种程度上混淆了排序函数/dom的位置

---

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

你传递给sort方法的比较函数的格式不正确

根据标准，应采用以下格式：

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

---

希望这有帮助

传递排序方法的比较函数的格式不正确

根据标准，应采用以下格式：

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

---

希望这有帮助

我试过：[Vista 92.png，Vista 81.png，Vista 93.png].sortfunctiona，b{返回a>b；}；而且效果很好。“你的代码里还有其他东西不起作用吗？”兹沃纳同意。图像正在加载吗？您是否尝试在img标记中添加结束符/符号？如果排序正常，问题是什么？@Lior字符串排序正常。元素的排序img显然不是。@VictorStanciu哇！我明白了！你的小提琴和我在FF中看到的上一把小提琴，因为FF是我阅读网页的工作浏览器。我打赌你也在用它。但是我的代码是为Webkit编写的，如果你在Chrome中打开小提琴，你会看到它以同样的方式损坏；而且效果很好。“你的代码里还有其他东西不起作用吗？”兹沃纳同意。图像正在加载吗？您是否尝试在img标记中添加结束符/符号？如果排序正常，问题是什么？@Lior字符串排序正常。元素的排序img显然不是。@VictorStanciu哇！我明白了！你的小提琴和我在FF中看到的上一把小提琴，因为FF是我阅读网页的工作浏览器。我打赌你也在用它。但是我的代码是为Webkit编写的，如果你在Chrome中打开小提琴，你会看到它以同样的方式被损坏。Chrome就像一个匿名者——在这种情况下它不会原谅不恰当。Chrome就像一个匿名者——在这种情况下它不会原谅不恰当。