Home/ Questions/Q 7784641
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T20:07:39+00:00

is there is simple way to sort only the outer level of multilist level

  • 0

is there is simple way to sort only the outer level of multilist level in HTML?
(it’s not important to sort the inner level of the lists)
If possible just javascript code, no jQuery since i never used it.

Example: Before sorting

  1. List Z

    • Katty
    • Della

  2. List G

    • Test
    • fox

  3. List R

    • ABC
    • AAC

After sorting:

  1. List G

    • Test
    • fox

  2. List R

    • ABC
    • AAC

  3. List Z

    • Katty
    • Della

Thank you in advance
Mike

After using the Jquery method answered below, i got error “Object does not support this property or method??

Update: here is acode sample:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This may be a good opportunity to start learning about jQuery; it has a lot to offer when it comes to DOM operations.

    There’s a nice write-up of element sorting using jQuery at http://james.padolsey.com/javascript/sorting-elements-with-jquery/.

    Using the sortElements approach outlined above, the following should allow you to sort your list (assuming that the top-level ul has a class of toplevellist).

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

    There’s a complete example at http://qd9.co.uk/projects/jQuery-Plugins/sort/demo.html. To use this on your site you need to:

    1) Add a jQuery script reference to your web page (e.g. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>)

    2) Save the file jquery.sort.js from the example and copy it to your server, and add it to your web page as a script reference.

    3) Add a call to the sortElements function in the example.

    If you definitely do not want to use jQuery, then the approach outlined at that page can still be used, depending on your level of JavaScript knowledge.

    • 0