Question

在下面的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>

Answer 1

请在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); });

排序技术升序和降序

1 个答案: