1

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

示例：排序前

  1. 列表 Z

    • 凯蒂
    • 德拉

  2. 清单 G

    • 测试
    • 狐狸

  3. 列表 R

    • 美国广播公司
    • AAC

排序后：

  1. 清单 G

    • 测试
    • 狐狸

  2. 列表 R

    • 美国广播公司
    • AAC

  3. 列表 Z

    • 凯蒂
    • 德拉

提前谢谢你，迈克

使用下面回答的 Jquery 方法后，出现错误“对象不支持此属性或方法？？

更新：这是代码示例：

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

1 回答 1

3

这可能是开始学习 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 知识水平。

于 2012-04-16T08:12:35.173 回答