Как отсортировать элементы списка по числам в конце текста внутри?

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>