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

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

javascript jquery html

Javascript 在不破坏子列表的情况下对li元素进行排序,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试写一些排序代码。我想对如下列表进行排序：香蕉蛋糕蛋甜甜圈汉堡米饭苹果变成: 苹果香蕉蛋糕蛋甜甜圈汉堡米饭使用Javascript按字母顺序对列表项排序函数sortUnorderedList（ul、sortDescending）{ 如果（ul的类型==“字符串”） ul=document.getElementById（ul）； var lis=ul.getElementsByTagName（“LI”）； var VAL=[]；对于（变量

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

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

变成:

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


使用Javascript按字母顺序对列表项排序
函数sortUnorderedList（ul、sortDescending）{
如果（ul的类型==“字符串”）
ul=document.getElementById（ul）；
var lis=ul.getElementsByTagName（“LI”）；
var VAL=[]；
对于（变量i=0，l=lis.length；i
香蕉
蛋糕

蛋
甜甜圈
汉堡

米饭
苹果

代码的主要问题是HTML无效

ul

不能是另一个

ul

的子级。只有

li

或

ol

可以。此无效HTML导致

li

的呈现方式与预期不同，因此排序受到影响。要解决此问题，请更正HTML，使嵌套的“蛋糕”位于

li

中

正如您已经用jQuery标记了这个问题一样，这里是您最初拥有的一个非常简单的实现：

jQuery（$=>{
让$ul=$（“#list”）；
$（'#test'）。在（'click'，function（）上{
让sort=$（this.data（'sortasc'）；
让dir=sort？[1，-1]：[-1，1]；
$ul.children（'li'）.sort（（a，b）=>a.innerText.trim（）

切换排序

香蕉

蛋糕

蛋
甜甜圈
汉堡


米饭
苹果
这是否回答了您的问题？
<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>