li排序的两种方法

最新推荐文章于 2024-07-12 16:27:40 发布

deze0926

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量687

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chengkun101/p/4644834.html

版权

1、一般做法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>li的排序(call)</title>
<meta name="" content="" />
</head>
<body>
<ul id="ul1">
    <li>78</li>
    <li>92</li>
    <li>69</li>
    <li>54</li>
    <li>70</li>
    <li>48</li>
</ul>
<script type="text/javascript">
    var eles = document.getElementsByTagName("li");
    var oUl = document.getElementsByTagName("ul").item(0);
    (function(){
        var a = [];
        for(var i=0;i<eles.length;i++){
            a[i] = eles[i];
        }
        a.sort(function(li1,li2){
            var n = parseFloat(li1.innerHTML);
            var m = parseFloat(li2.innerHTML);
            return n-m;
        });

        for(var i=0;i<a.length;i++){
            oUl.appendChild(a[i]);
        }
    })();
    
</script>
</body>
</html>

2、利用call方法，让arguments转换成数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>li的排序(call)</title>
<meta name="" content="" />
</head>
<body>
<ul id="ul1">
    <li>78</li>
    <li>92</li>
    <li>69</li>
    <li>54</li>
    <li>70</li>
    <li>48</li>
</ul>


<script type="text/javascript">
    var eles = document.getElementsByTagName("li");
    var oUl = document.getElementsByTagName("ul").item(0);
    var a = [].slice.call(eles,0);
    a.sort(function(a,b){
        return a.innerHTML-b.innerHTML;
    })
    for(var i=0;i<a.length;i++){
        oUl.appendChild(a[i]);
    }
    
</script>
</body>
</html>

转载于:https://www.cnblogs.com/chengkun101/p/4644834.html

deze0926

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
li排序的两种方法

1、一般做法<!DOCTYPE html><html><head><meta charset="utf-8"><title>li的排序(call)</title><meta name="" content="" /></head><body>...
复制链接

扫一扫