如何使用jquery对图像进行排序？

Question

我正在使用一个滑块，根据文件名放置图像，我已将这些图像命名为

img-1, img-2, img-3, img-4, img-5, img-6, img-7, img-8, img-9, img-10

但是浏览器正在这样排序

img-1, img-10, img-2, img-3, img-4, img-5, img-6, img-7, img-8, img-9

那么如何对我的图像进行排序以便在我的示例中img-10最后会使用jquery？

Answer 1

如果您只是想对图像名称进行排序，可以使用纯JS编写自定义排序函数：

sorted = imageNames.sort(function(a, b) { 
      return parseInt(a.split('-')[1], 10) - parseInt(b.split('-')[1], 10) 
});

这将根据文件名中-字符后面的数值进行排序。

Answer 2

这就是你要找的东西（neal注意到没有滑动）。

$('img-selector').click(function(){
  $(this).parent().prepend(this);
});

Answer 3

排序发生在Lexicographical order。如果您确定图像小于99（我的意思是两位数），您最好为数字添加“0”前缀。

这样的事情：

"img-01", "img-02", "img-03", "img-04", "img-05", "img-06", "img-07", "img-08", "img-09", "img-10"

或

使用字母而不是编号系统。

"img-a", "img-b", "img-c", "img-d", "img-e", "img-f", "img-g", "img-h", "img-i", "img-j"

Further reading