jQuery Order <LI> List Example

To order a list, use the sort function and return the results to the parents html function.

by Ketan Patel

HTML

<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    
</script>
<body>
    <p>Super Heroes</p>
    <ul id="ulSuperHeroes">
        <li value="1">Goku</li>
        <li value="6">Captain America</li>
        <li value="4">Superman</li>
        <li value="3">Flash</li>
        <li value="5">Wolverine</li>
        <li value="2">Vegeta</li>
    </ul>
    <input id="btnSortName" type="button" value="Sort List By Name"></input>
    <input id="btnSortValue" type="button" value="Sort List By Value"></input>
</body>

JavaScript

$(document).ready(function () {

    $("#btnSortName").on("click", function () {

        $("#ulSuperHeroes").html(

            $("#ulSuperHeroes").children("li").sort(function (a, b) {
    
                return $(a).text().toUpperCase().localeCompare(
    
                $(b).text().toUpperCase());
    
            }) // End Sort

        ); // End HTML 

    }); // End Button Sort Name Click


    $("#btnSortValue").on("click", function () {

        $("#ulSuperHeroes").html(

            $("#ulSuperHeroes").children("li").sort(function (a, b) {
    
                return $(a).val() - $(b).val();
    
            }) // End Sort

        ); // End HTML 

    }); // End Button Sort Name Click

}); // End Document Ready