在不破坏子列表的情况下对 li 元素进行排序答案

【问题标题】：Sort li elements without ruining the sub-list在不破坏子列表的情况下对 li 元素进行排序
【发布时间】：2020-03-23 09:18:28
【问题描述】：

我正在尝试编写一些排序代码。我想对列表进行排序：

香蕉
蛋糕
- 鸡蛋
- 甜甜圈
- 汉堡
大米
苹果

然后变成：

苹果
香蕉
蛋糕
- 鸡蛋
- 甜甜圈
- 汉堡
大米

<html>
    <head>
        <title>Sort list items alphabetically with Javascript</title>
        <script type="text/javascript">

        function sortUnorderedList(ul, sortDescending) {
          if(typeof ul == "string")
            ul = document.getElementById(ul);

          var lis = ul.getElementsByTagName("LI");
          var vals = [];

          for(var i = 0, l = lis.length; i < l; i++)
            vals.push(lis[i].innerHTML);

          vals.sort();

          if(sortDescending)
            vals.reverse();

          for(var i = 0, l = lis.length; i < l; i++)
            lis[i].innerHTML = vals[i];
        }

        window.onload = function() {
          var desc = false;
          document.getElementById("test").onclick = function() {
            sortUnorderedList("list", desc);
            desc = !desc;
            return false;
          }
        }

        </script>
    </head>
    <body>
        <input type="button" id="test" value="Sort List (click again to reverse)"/>
        <ul id="list">
            <li>banana</li>
            <li>cake</li>
              <ul>
                <li>egg</li>
                <li>doughnut</li>
                <li>burger</li>
              </ul>
            <li>rice</li>
            <li>apple</li>
        </ul>
    </body>
</html>

【问题讨论】：

这能回答你的问题吗？ Sort objects in an array alphabetically on one property of the array

标签： javascript jquery html

【解决方案1】：

您的代码的主要问题是您的 HTML 无效； ul 不能是另一个 ul 的孩子。只有li 或ol 可以。这个无效的 HTML 会导致 li 的呈现方式与您预期的不同，因此排序会受到影响。要解决此问题，请纠正 HTML，使嵌套的“蛋糕”ul 位于 li 内。

当您使用 jQuery 标记问题时，这里是您最初拥有的一个非常简单的实现：

jQuery($ => {
  let $ul = $('#list');

  $('#test').on('click', function() {
    let sort = $(this).data('sortasc');
    let dir = sort ? [1, -1] : [-1, 1];
    $ul.children('li').sort((a, b) => a.innerText.trim() < b.innerText.trim() ? dir[0] : dir[1]).appendTo($ul);
    $(this).data('sortasc', !sort);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="test">Toggle sort</button>
<ul id="list">
  <li>banana</li>
  <li>
    cake
    <ul>
      <li>egg</li>
      <li>doughnut</li>
      <li>burger</li>
    </ul>
  </li>
  <li>rice</li>
  <li>apple</li>
</ul>

【讨论】：