CODEWITHSUNDEEP
javascripthtml
Maro
Maro

Reputation: 2629

HTML simple list sorting

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>

Upvotes: 1

Views: 383

Answers (1)

Richard Ev
Richard Ev

Reputation: 54127

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.

Upvotes: 3

Related Questions