如何使用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

排序按字典顺序进行 。 如果您确定图像小于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"

进一步阅读