我如何根据里面文本末尾的数字对列表项进行排序？

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() 返回所有htmls内的全文。li. 你只需要用 $(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 再次更新用户界面。

演示。

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>