Home/ Questions/Q 9215197
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T02:09:03+00:00

In the below html code I am having a name and age, on click

  • 0

In the below html code I am having a name and age, on click of name and age the list items should get sorted from ascending to descending or descending to ascending.

This should be achieved without using any plugins
Please help me out how to achieve this. I am really very needful.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>test</title>

  <style type="text/css">
  body{
    width:100%;
    margin:0px;padding:0px;
    font-size:14px;font-family:Arial;
  }
    #content{
        width:100%;
        border:1px solid red;
        height:auto;
    }
    #sorting_div{
        width:300px;
        border:1px solid black;
        height:30px;
    }
    #name{
        display:inline-block;
        width:200px;
    }
    #sorting_list{
        width:300px;
        border:1px solid green;
        height:100px;
    }
</style>

</head>
<body>
<div id="content">
<div id="sorting_div">
    <span id="name">Name</span>
    <span id="Age">Age</span>
</div>
    <div id="sorting_list">
        <ul>
            <li><label>Jenifer</label> <span>24</span></li>
            <li><label>Kate</label> <span>18</span></li>
            <li><label>David</label> <span>25</span></li>
            <li><label>Mark</label> <span>25</span></li>

        </ul>

    </div>
</div>




</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Pls try the below sample code for normal text in li element

    var mylist = $('#sorting_list ul');
var listitems = mylist.children('li').get();
mylist.empty();
listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
    • 0