JavaScript/jQuery如何对元素进行排序

如下DOM结构，要求按照li中的用户数从小到大，或者从大到下的顺序，对li进行排序。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sortTest</title>
</head>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sort").click(function(){
var lis = $("li[isSort='1']");
for (var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
})
})
</script>
<body>
<ul>
<li isSort="1">
<span>
<font>用户数：</font>
<font style="color:red;">12</font>
</span>
</li>
<li isSort="1">
<span>
<font>用户数：</font>
<font style="color:red;">23</font>
</span>
</li>
<li isSort="1">
<span>
<font>用户数：</font>
<font style="color:red;">2</font>
</span>
</li>
<li isSort="1">
<span>
<font>用户数：</font>
<font style="color:red;">19</font>
</span>
</li>
</ul>
<input id="sort" type="button" value="sort"/>
</body>
</html>

解决方案 »

  1.   

    试下
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <title> new document </title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script type="text/javascript" src="js/jq.js"></script>
    </head> <body>

    <script type="text/javascript">
    $(function(){
        $("#sort").click(function(){
    var users = [];
    var str= "";
            var lis = $("li[isSort='1']").each(function(i){users[users.length] = [$(this).find("font").get(1).innerText, $(this).get(0).outerHTML]});
            for (var i=0;i<lis.length;i++){
                alert(lis[i].outerHTML);
            }
    users.sort(function(a,b){return a[0]-b[0]}); for (var i=0;i<users.length;i++){
               str += users[i][1];
            }
    $("ul").html(str);
        })
    })
    </script>
    <body>
    <ul>
        <li isSort="1">
            <span>
                <font>用户数：</font>
                <font style="color:red;">12</font>
            </span>
        </li>
        <li isSort="1">
            <span>
                <font>用户数：</font>
                <font style="color:red;">23</font>
            </span>
        </li>
        <li isSort="1">
            <span>
                <font>用户数：</font>
                <font style="color:red;">2</font>
            </span>
        </li>
        <li isSort="1">
            <span>
                <font>用户数：</font>
                <font style="color:red;">19</font>
            </span>
        </li>
    </ul>
    <input id="sort" type="button" value="sort"/> </body>
    </html>
      

  2.   

    不用对LI进行实际排序，那样较麻烦，只需要改写LI内显示的全部innerHTML就可以了。现在你能取到每个LI的内容，通过正则查找或普通的字串查找截取，都可以得到其中的用户数量，这应该没问题，把它们存到一个数组中。然后对数组排序。最后，循环提取排序后的数组成员，按原来的格式生成新的HTML赋给每个LI元素，就可以了。