Как осуществить сортировку в списке?

Question

[Сергей]

Есть список:

<ul>
  <li class="item">
    <img src="picture1.jpg" alt="Picture 1">
    <a class="link" href="#">Франция</a></li>
  <li class="item">
    <img src="picture2.jpg" alt="Picture 2">
    <a class="link" href="#">Германия</a></li>
  </li>
  <li class="item">
    <img src="picture3.jpg" alt="Picture 3">
    <a class="link" href="#">Великобритания</a></li>
  </li>
</ul>

Как сделать сортировку пунктов списка в алфавитном порядке? Мои наброски:

var items = document.querySelectorAll(".item");
var arr = [];

for (var i = 0; i < items.length; i++) {
  var link = items[i].querySelector(".link");
  var txt = link.innerText;

  arr.push(txt);
  arr.sort();
}

Имеем массив с отсортированными значениями. Что делать дальше? Обратите внимание на то, что каждый пункт списка помимо ссылки содержит уникальную картинку.

Comments

[Дмитрий]

https://www.w3schools.com/howto/tryit.asp?filename...

Answer 1

[0xD34F]

[...document.querySelector('ul').children]
  .map(n => ({ el: n, text: n.querySelector('.link').innerText }))
  .sort((a, b) => a.text.localeCompare(b.text))
  .forEach(n => n.el.parentNode.append(n.el));

Comments

[Сергей]

Вы гений!

[Ridz]

0xD34F вы уверены что а > b достаточно для правильной сортировки?

[0xD34F]

Не уверен, да, косяк. Переписал ответ.

[Ridz]

0xD34F если интересно, смотреть в Google Chrome

for (var i = 0; i < 50; i++) {
  var a = [..."abcdefabcdef"].sort(()=> Math.random() > .5).sort((a,b)=>a > b ); //a > b ? 1 : a < b ? -1 : 0
  document.write(a +"<br>") //ожидаемый результат  a,a,b,b,c,c,d,d,e,e,f,f
   }

[0xD34F]

Не интересно.

[Сергей]

В основных браузерах (Chrome, Firefox, Opera) работает корректно. С уточнением Ridz работает и в Edge. Попутный вопрос: возможно ли сократить эту запись

a.querySelector('.link').innerText > b.querySelector('.link').innerText

?

[Ridz]

Сергей

[...document.querySelectorAll('.item')].sort((a, b) => {
       a = a.querySelector('.link').innerText;
       b = b.querySelector('.link').innerText;
       return a > b ? 1 : a < b ? -1 : 0
   }).forEach(n => {
       document.querySelector('ul').append(n);
   });