Сортировать буквенно-цифровой список HTML

Question

Мне нужно отсортировать буквенно-цифровой список.Я могу сортировать, но кое-как, потому что это буквенно-цифровой, я не могу поставить abc1 перед abc10.

Мой HTML-код:

<ul class="theList">
   <li><b>abc11:</b>Hello</li>
   <li><b>abc10:</b>Hello</li>
   <li><b>xyz24:</b>Hello</li>
   <li><b>abc1:</b>Hello</li>
   <li><b>xyz2:</b>Hello</li>
</ul>

Мой JavaScript:

  $(document).ready(function() {
    var list, i, switching, b, shouldSwitch;
    list = document.getElementsByClassName("theList");
    for (var j = 0; j < list.length; j++) {
      switching = true;
      while (switching) {
        switching = false;
        b = list[j].getElementsByTagName("li");
        for (i = 0; i < (b.length - 1); i++) {
          shouldSwitch = false;
          if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
            shouldSwitch = true;
            break;
          }
        }
        if (shouldSwitch) {
          b[i].parentNode.insertBefore(b[i + 1], b[i]);
          switching = true;
        }
      }
    }
  });

Мой результат:

• abc10: Привет
• abc11: Привет
• abc1: Привет
• xyz24: Привет
• xyz2: Hello

Ожидаемый результат:

• abc1: Hello
• abc10: Hello
• abc11: Hello
• xyz2: Привет
• xyz24: Привет

Чего мне не хватает?

Answer 1

Вероятно, было бы намного проще отсортировать li s в их собственном массиве вне документа, а затем снова добавить их к ul в правильном порядке.Вы можете использовать localeCompare, чтобы проверить, какая строка находится на первом месте лексикографически, jQuery не требуется:

const theList = document.querySelector('.theList');
const lis = Array.from(theList.children);
const firstText = elm => elm.children[0].textContent;
lis.sort((a, b) => firstText(a).localeCompare(firstText(b)));
lis.forEach(li => theList.appendChild(li));

<ul class="theList">
   <li><b>abc11:</b>Hello</li>
   <li><b>abc10:</b>Hello</li>
   <li><b>xyz24:</b>Hello</li>
   <li><b>abc1:</b>Hello</li>
   <li><b>xyz2:</b>Hello</li>
</ul>

Чтобы отсортировать несколько таких списков, выполните итерацию по querySelectorAll:

document.querySelectorAll('.theList').forEach((theList) => {
  const lis = Array.from(theList.children);
  const firstText = elm => elm.children[0].textContent;
  lis.sort((a, b) => firstText(a).localeCompare(firstText(b)));
  lis.forEach(li => theList.appendChild(li));
});

<ul class="theList">
   <li><b>abc11:</b>Hello</li>
   <li><b>abc10:</b>Hello</li>
   <li><b>xyz24:</b>Hello</li>
   <li><b>abc1:</b>Hello</li>
   <li><b>xyz2:</b>Hello</li>
</ul>

<ul class="theList">
   <li><b>abc11:</b>Hello</li>
   <li><b>abc10:</b>Hello</li>
   <li><b>xyz24:</b>Hello</li>
   <li><b>abc1:</b>Hello</li>
   <li><b>xyz2:</b>Hello</li>
</ul>