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

Question

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

javascriptjqueryhtml

4

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

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

并转换为：

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

<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>

- Renz

这个回答解决了你的问题吗？按数组中一个属性的字母顺序对对象进行排序 - Eran Goldin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rory McCrossan · Accepted Answer

你的代码主要问题是HTML无效；ul不能作为另一个ul的子节点。只有li或ol可以。这个无效的HTML会导致li的呈现方式与你所期望的不同，从而影响排序。为了修复这个问题，请将嵌套的“cake” ul 放在li内，以便正确地显示HTML。

由于您已使用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>