0

以下のHTMLコードでは、名前と年齢を持っています。名前と年齢をクリックすると、リスト項目は昇順から降順、または降順から昇順にソートされます。

これは、プラグインを使用せずに達成する必要があります。これを達成する方法を教えてください。私は本当にとても必要です。

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

1 に答える 1

0

li要素の通常のテキストについては、以下のサンプルコードを試してください

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); });
于 2013-01-31T17:02:55.630 に答える