jquery - 如何根据内部文本末尾的数字对列表项进行排序？

Question

我合并了 JSON 中的两项(名称和年份)使用 Jquery 来显示这样的数据。我的问题是我是否可以对此进行排序 <ul>按第一行中每行末尾的数字 <a> 。

<ul id="job">
<li> 
  <a href="#"> Name1 (2001)</a>
   <br>
  <a href="#"> link to Name1 related stuff</a>
</li>
<li> 
  <a href="#"> Name2 (1994)</a>
   <br>
  <a href="#"> link to Name2 related stuff</a>
</li>
   <li> 
  <a href="#"> Name3 (2005)</a>
   <br>
  <a href="#"> link to Name3 related stuff</a>
</li>
</ul>

我在这个项目的其他场合使用过下面的代码块，但我不确定如何修改它以按照我想要的方式按末尾的数字排序。

 function sortResults(selector){
   var $ul= $(selector);
   $ul.find('li').sort(function (a,b) {
   var upA = $(a).text().toUpperCase();
   var upB = $(b).text().toUpperCase();
   return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
}).appendTo(selector);
};

有人可以就此提出建议吗？

Answer 1

这里有一些事情:

1. $(a).text() 返回 li 内所有 html 内的全文。您只需要使用 $(a).find('a:first').text()。获取 li 内的第一个链接文本。

2. 之后，您需要获取 (xxx) 之间的文本并将其转换为数字，例如:

   var upA = +$(a).find('a:first').text().match(/\((.*?)\)/)[1];
   var upB = +$(b).find('a:first').text().match(/\((.*?)\)/)[1];
   

3. 然后进行简单的数字排序，例如return upB - upA;

4. 最后，获取排序后的列表项并将新列表再次附加到 ul 中以更新 UI。

演示:

var $ul = $('ul');
var items = $ul.children('li').get();

items.sort(function(a, b) {
  var upA = +$(a).find('a:first').text().match(/\((.*?)\)/)[1];
  var upB = +$(b).find('a:first').text().match(/\((.*?)\)/)[1];
  return upB - upA;
})

$.each(items, function(_, li) {
  $ul.append(li);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="job">
  <li>
    <a href="#"> Name1 (2001)</a>
    <br>
    <a href="#"> link to Name1 related stuff</a>
  </li>
  <li>
    <a href="#"> Name2 (1994)</a>
    <br>
    <a href="#"> link to Name2 related stuff</a>
  </li>
  <li>
    <a href="#"> Name3 (2005)</a>
    <br>
    <a href="#"> link to Name3 related stuff</a>
  </li>
</ul>