Javascript TinySort-动画排序示例

我正在用TinySort制作排行榜/高分，当我只有正确排序的数字时，它工作得非常完美。当然，我需要在每个分数前面加上一个名字，所以当我这样做时，它会按字母顺序排序，因为有字符

注意：我正在使用此插件中的动画排序：

代码如下： HTML:

TinySort允许您设置为处理此类情况。在函数内部，您可以手动从值中删除名称，并仅比较数字

$Li.tsort({
    sortFunction: function (a, b) {

        // Remove the text from your item, leaving only the numbers
        var aNum = a.e.text().split(' ')[1];
        var bNum = b.e.text().split(' ')[1];

        return bNum - aNum;
    }
});

更新：

要回答您在评论中提出的问题，您可以轻松地以不同的方式标记内容，以便于更新。例如，您可以将名称和分数封装在跨距中，然后只更新排序函数

sortFunction: function (a, b) {
  // Perform whatever logic we need to go from the items to be sorted (the list items)
  // to the text we actually want to compare (scores)
  var aNum = a.e.find('.score').text();
  var bNum = b.e.find('.score').text();

  // Return a comparison of the scores
  return bNum - aNum;
}

最重要的是理解，这将在你作为程序员的一生中一次又一次地帮助你

a

和

b

只是要比较的两个项目，您的函数应该返回一个比较，告诉它应该将哪个放在另一个之前

TinySort插件在其文档中告诉您，

a

和

b

有几个属性，其中一个是

e

，即包含排序项的jQuery对象。这意味着您可以使用所需的任何jQuery方法，只获取要比较的项—在您的情况下，就是分数

---

在演示中，我的分数有时在名称之前，有时在名称之后，但您可以看到，当您对其进行排序时，所有分数都会按分数进行准确排序。

请格式化您的代码。不缩进代码会让推理变得异常困难。哇，内特，谢谢，它看起来很有效。但是有没有一种方法，我可以先得到分数，然后是名字，然后把分数和名字分开，这样我就可以改变分数，但不需要在后面写“nate”，比如2个跨度，我可以更新分数跨度：Nate36！tsort只会按分数排序吗？我更新了我的答案来帮助回答你的问题。希望有帮助！这帮了大忙，真是太好了。谢谢你的解释，现在我明白了：）我不想打扰你，但是如果你认为这很容易，你能告诉我如何将列表项向右对齐吗？我用text align:right做的，但是在排序之后，它变成了“position:absolute”。如果你认为这太棘手了，那没关系：）

$Li.tsort({
    sortFunction: function (a, b) {

        // Remove the text from your item, leaving only the numbers
        var aNum = a.e.text().split(' ')[1];
        var bNum = b.e.text().split(' ')[1];

        return bNum - aNum;
    }
});

sortFunction: function (a, b) {
  // Perform whatever logic we need to go from the items to be sorted (the list items)
  // to the text we actually want to compare (scores)
  var aNum = a.e.find('.score').text();
  var bNum = b.e.find('.score').text();

  // Return a comparison of the scores
  return bNum - aNum;
}