1

HTMLでマルチリストレベルの外部レベルのみを並べ替える簡単な方法はありますか？（リストの内部レベルを並べ替えることは重要ではありません）可能であれば、javascriptコードだけで、jQueryは使用したことがないので使用しません。

例：並べ替える前

  1. リストZ

    • キャティ
    • デラ

  2. リストG

    • テスト
    • 狐

  3. リストR

    • ABC
    • AAC

ソート後：

  1. リストG

    • テスト
    • 狐

  2. リストR

    • ABC
    • 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スクリプト参照をWebページに追加します（例<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>） 。

2）例からファイルjquery.sort.jsを保存してサーバーにコピーし、スクリプト参照としてWebページに追加します。

sortElements3）例の関数への呼び出しを追加します。

どうしてもjQueryを使用したくない場合でも、JavaScriptの知識のレベルに応じて、そのページで概説されているアプローチを使用できます。

于 2012-04-16T08:12:35.173 に答える