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 回答