使用 HTML 按除第一行的第一个字母以外的行/元素对列表进行排序答案

【问题标题】：Sorting lists by lines/elements other than the 1st letter of the 1st line using HTML使用 HTML 按除第一行的第一个字母以外的行/元素对列表进行排序
【发布时间】：2019-05-08 08:06:16
【问题描述】：

我现在才开始学习 HTML，我遇到了如何对 w3schools 上的列表进行排序 [link -> https://www.w3schools.com/howto/howto_js_sort_list.asp]

使用该链接中的代码，我将所有

元素（奥斯陆、斯德哥尔摩、赫尔辛基等）替换为以下三个：

杰西卡

伦敦
1975

亚伦

东京
1962

彼得
纽约
1958

现在，当我单击“排序”时，列表当然按预期排序，按第一行的第一个字母排序，如下所示：

亚伦
东京
1962

杰西卡
伦敦
1975

彼得
纽约
1958

我想要的是再添加 2 个排序按钮；一个按第 2 行排序，另一个按第 3 行排序。我做了一个图表来更好地描述我在说什么： https://i.imgur.com/uiPEYqs.png

这可能吗？告诉我，谢谢。

【问题讨论】：

标签： html list sorting element

【解决方案1】：

修改示例，

使用sortList('2') 和sortList('3') 进行基于第二和第三行的排序

您可以在此网址复制粘贴以下代码： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_list

其他网址：

https://www.w3schools.com/howto/howto_js_sort_list.asp

<!DOCTYPE html>
<html>
<title>Sort a HTML List Alphabetically</title>
<body>

<p>Click the button to sort the list alphabetically:</p>
<button onclick="sortList('1')">Sort</button>

<div id="id01">
    <ul class="group">
        <li class="1">Aaron</li>
        <li class="2">Tokyo</li>
        <li class="3">2012</li>
    </ul>
    <ul class="group">
        <li class="1">Jessica</li>
        <li class="2">London</li>
        <li class="3">2015</li>
    </ul>
    <ul class="group">
        <li class="1">Peter</li>
        <li class="2">New York</li>
        <li class="3">2008</li>
    </ul>
</div>

<script>
function sortList(sort_class_name) {
  /*
    sort_class_name - 1,2,3
  */
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // start by saying: no switching is done:
    switching = false;
    b = list.getElementsByClassName(sort_class_name);
    console.log(b);
    // Loop through all list-items:
    for (i = 0; i < (b.length - 1); i++) {
      // start by saying there should be no switching:
      shouldSwitch = false;
      /* check if the next item should
      switch place with the current item: */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* if next item is alphabetically
        lower than current item, mark as a switch
        and break the loop: */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark the switch as done: */
      b[i].parentNode.parentNode.insertBefore(b[i + 1].parentNode, b[i].parentNode);
      switching = true;
    }
  }
}
</script>

</body>
</html>

【讨论】：

我只是在使用一些类并对元素的父节点进行排序。希望它能解决你的问题！
谢谢，这似乎工作正常。如果我被困在任何地方，我会进一步检查并让你知道。另外，很抱歉有多个日期（1975/1962/1958 和 2012/2015/2008）。我不小心把它们混在一起了。我更正了我的原始帖子，以避免将来混淆。谢谢:)