Question

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

注意：我正在使用此插件中的动画排序：http://tinysort.sjeiti.com/

下面是代码： HTML：

<ol id="xanim" class="xmpl">
  <li id="high1">34</li>
  <li id="high2" >3334</li>
  <li id="high3">344</li>
  <li id="high4">3244</li>
  <li id="high5">3345</li>
  <li id="high6">345</li>
  <li id="high7">35</li>
  <li id="high8">0</li>
  <li id="high9">0</li>
  <li id="high10">0</li>
</ol>
<button onclick="sortHighscore()">sort</button>

JS：

function sortHighscore(){
  $.tinysort.defaults.order = 'desc';
  var $Ul = $('ol#xanim');
  $Ul.css({position:'relative',height:$Ul.height(),display:'block'});
  var iLnH;
  var $Li = $('ol#xanim>li');
  $Li.each(function(i,el){
     var iY = $(el).position().top;
     $.data(el,'h',iY);
     if (i===1) iLnH = iY;
   });
$Li.tsort().each(function(i,el){
  var $El = $(el);
  var iFr = $.data(el,'h');
  var iTo = i*iLnH;
  $El.css({position:'absolute',top:iFr}).animate({top:iTo},500);
 });    }

Answer 1

TinySort允许您设置your own custom sorting function来处理此类案例。在函数内部，您可以手动从值中删除名称，并仅比较数字。

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

Live Demo

<强>更新

要回答您在评论中提出的问题，您可以通过不同方式轻松标记内容，以便更新。例如，您可以在跨度中包装名称和分数，然后只需更新排序功能。

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

Live Demo

最重要的是要了解sorting functions，这将在您作为程序员的整个生命中一遍又一遍地帮助您。 a和b只是两个要比较的项目，您的函数应返回一个比较，告诉它哪个要先于另一个。

TinySort插件在其文档中告诉您a和b有几个属性，其中一个是e，jQuery对象包含已排序的项目。这意味着你可以使用你需要的任何jQuery方法来获得你想要比较的项目 - 在你的情况下，得分。

在演示中，我有时会在名称之前和有时之后获得分数，但是您可以看到，当您对其进行排序时，无论如何都可以按分数对其进行准确分类。

TinySort - 动画排序示例

1 个答案: