Question

有没有简单的方法来排序HTML中多列表级别的外层？（对列表的内部级别进行排序并不重要）如果可能只是javascript代码，没有jQuery，因为我从未使用它。

示例：排序前

列出Z
- 凯蒂
- 德拉
列表G
- 测试
- 狐
列表R
- ABC
- AAC

排序后：

列表G
- 测试
- 狐
列表R
- ABC
- AAC
列出Z
- 凯蒂
- 德拉

提前谢谢你麦克

使用下面回答的Jquery方法后，我收到错误“对象不支持此属性或方法??

更新：这是acode示例：

<head>

<script LANGUAGE="JavaScript" SRC="./js/jquery-1.7.2.js"></SCRIPT>
<script type="text/javascript">



    function sortDesc()
    {
        $('ul.list > li').sortElements(function(a, b){
        return $(a).text() > $(b).text() ? 1 : -1;});
    }

</script>
</head>

<body>
    <div id="container">
        <div id="main">
            <div class="c1">
                <div id="example-list">
                    <table cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                            <td align="middle"     align="center" title='sort' style="cursor:pointer" valign="middle" align="center"  style="width:20px; height:20px;">
                                <img border="0" src="./js/r_oinfo.gif" width="20" height="20"  onclick="sortDesc()">
                        </td>
                    </table>
                    <ul class="list">
                        <li>
                            Search

                        </li>
                        <ul>
                            <li>
                                se 1
                            </li>
                            <li>
                                se 2
                            </li>
                            <li>
                                se 0
                            </li>
                        </ul>
                        <li>
                            Sort
                        </li>
                        <ul>
                            <li>
                                so 1
                            </li>
                            <li>
                                so 0
                            </li>
                        </ul>
                        <li>
                            Filter

                        </li>
                    </ul>
                 </div>
            </div>

        </div>
    </div>
</body>
</html>

Answer 1

这可能是开始学习jQuery的好机会;在涉及DOM操作时，它有很多东西可以提供。

在http://james.padolsey.com/javascript/sorting-elements-with-jquery/使用jQuery对元素排序进行了很好的描述。

使用上面列出的sortElements方法，以下内容应该允许您对列表进行排序（假设顶级ul的类别为toplevellist）。

$('ul.toplevellist > li').sortElements(function(a, b){
    return $(a).text() > $(b).text() ? 1 : -1;
});

http://qd9.co.uk/projects/jQuery-Plugins/sort/demo.html有一个完整的例子。要在您的网站上使用此功能，您需要：

1）向您的网页添加jQuery脚本引用（例如<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>）

2）保存示例中的文件jquery.sort.js并将其复制到您的服务器，并将其作为脚本参考添加到您的网页。

3）在示例中添加对sortElements函数的调用。

如果你肯定不想使用jQuery，那么仍然可以使用该页面概述的方法，具体取决于你的JavaScript知识水平。

HTML简单列表排序

1 个答案: