Question

我需要对一个字母数字列表进行排序。我能够排序，但是由于它是alphaNumeric，因此可以进行一些排序，因此无法将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：你好

预期结果：

abc1：你好
abc10：你好
abc11：你好
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>

排序字母数字HTML列表

1 个答案: