时间戳

首页 > 解决方案 > 如何按文本内容（包括数字）对列表进行排序？

javascript - 如何按文本内容（包括数字）对列表进行排序？

问题描述

我正在尝试按从最低到最高的距离（56 公里、96 公里、6 公里）对这个列表进行排序。我知道有更简单的方法来处理和添加 li 到 ul，但我需要这种形式。问题是我完全没有想法，也没有在互联网上找到任何东西。

    <ul class="collapsible z-depth-0 assignment " id="assigment_list" style="border: none;">

    </ul>

const assignmentList = document.querySelector('.assignment');

  const li = `
  <li >
    <div class="collapsible-header grey lighten-4 right-align"> Nick, 56km from you </div>
  </li>
    <li >
    <div class="collapsible-header grey lighten-4 right-align">Niclas, 96km from you  </div>
  </li>
  <li >
    <div class="collapsible-header grey lighten-4 right-align"> Max, 6km from you </div>
  </li>
`;
html += li;
assignmentList.innerHTML = html

标签： javascripthtmlsortinghtml-listsmaterialize

解决方案

如果您将距离作为字符串而不是数字，则可以使用该parseInt函数先将它们转换为数字，然后再排序。像这样的东西

const distances = ["96km", "6km", "56km"]
// Use parseInt function to get the kilometers as number
const intDistances = distances.map((stringDistance) => {
  // Note that, parseInt stops at the first character that is not number-like
  // So parseInt("6km") will return 6
  const intDistance = parseInt(stringDistance, 10);
    return intDistance;
})
// Sorted
intDistances.sort((a, b) => a - b);

推荐阅读