使用javascript对HTML列表进行排序

一尘不染

使用javascript对HTML列表进行排序

html

我有一组三个列表项，它们希望在页面加载时从高到低自动显示。理想情况下使用jquery或javascript。

<ul class="list">
<li id="alpha">32</li>
<li id="beta">170</li>
<li id="delta">28</li>
</ul>

每个列表项都需要有自己的ID，因为它们每个都有各自的背景图像。数字必须是文本节点，以便用户可以编辑它们。

阅读 282

2020-05-10

共1个答案

一尘不染

这可能是最快的方法，因为它不使用jQuery：

function sortList(ul){
    var new_ul = ul.cloneNode(false);

    // Add all lis to an array
    var lis = [];
    for(var i = ul.childNodes.length; i--;){
        if(ul.childNodes[i].nodeName === 'LI')
            lis.push(ul.childNodes[i]);
    }

    // Sort the lis in descending order
    lis.sort(function(a, b){
       return parseInt(b.childNodes[0].data , 10) - 
              parseInt(a.childNodes[0].data , 10);
    });

    // Add them into the ul in order
    for(var i = 0; i < lis.length; i++)
        new_ul.appendChild(lis[i]);
    ul.parentNode.replaceChild(new_ul, ul);
}

像下面这样调用函数：

sortList(document.getElementsByClassName('list')[0]);

您可以以相同的方式对其他列表进行排序，如果列表类在同一页面上还有其他元素，则应给您的ul一个ID并使用它传递它。

编辑

既然您提到要在pageLoad上执行此操作，所以我假设您希望ul在DOM中后尽快发生，这意味着您应该将该函数添加sortList到页面的开头，并在列表之后立即使用它，例如这个：

<head>
    ...
    <script type="text/javascript">
        function sortList(ul){
            var new_ul = ul.cloneNode(false);
            var lis = [];
            for(var i = ul.childNodes.length; i--;){
                if(ul.childNodes[i].nodeName === 'LI')
                    lis.push(ul.childNodes[i]);
            }
            lis.sort(function(a, b){
               return parseInt(b.childNodes[0].data , 10) - parseInt(a.childNodes[0].data , 10);
            });
            for(var i = 0; i < lis.length; i++)
                new_ul.appendChild(lis[i]);
            ul.parentNode.replaceChild(new_ul, ul);
        }
    </script>
</head>
<body>
    ...
    <ul class="list">
        <li id="alpha">32</li>
        <li id="beta">170</li>
        <li id="delta">28</li>
    </ul>
    <script type="text/javascript">
        !function(){
            var uls = document.getElementsByTagName('ul');
            sortList( uls[uls.length - 1] );
        }();
    </script>
    ...
</body>

2020-05-10