自定义属性实现摇号排序

最新推荐文章于 2023-10-31 14:32:48 发布

wth_xk

最新推荐文章于 2023-10-31 14:32:48 发布

阅读量623

点赞数

文章标签：自定义属性

本文链接：https://blog.csdn.net/xingkong_333/article/details/73927633

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="queue">
    <li>Eric</li>
    <li>Scott</li>
    <li>Jerry</li>
    <li>Tom</li>
    <li>Rose</li>
    <li>John</li>
    <li>Smith</li>
    <li>Andy</li>
</ul>

<script>
    //按id找到ul，保存在变量ul中
    var ul=document.getElementById("queue");
    //找到ul下所有li，保存在lis中
    var lis=ul.getElementsByTagName("li");
    //将lis的li个数保存在变量len中
    var len=lis.length;
    //定义空数组nums
    var nums=[];
    //反复生成序号，直到nums的个数==len
    while(nums.length<len){
    //  在1~len范围内生成一个随机整数，保存在变量num中
        var num=parseInt(Math.random()*len+1);
    //  如果num在数组中不存在
        if (nums.indexOf(num)==-1){
            nums.push(num);//将num压入nums中
        }
    }


    //遍历lis中每个li，i从0开始，到<len结束，i每次增1
    for(var i=0;i<len;i++){
    //  为每个li添加自定义属性data-i，值设置为nums中相同位置的值
        lis[i].dataset.i=nums[i];
    }
    //将类数组对象变为数组类型对象
    lis=Array.prototype.slice.call(lis);

    lis.sort.call(lis,function (a,b) {
        return a.dataset.i-b.dataset.i;
    });
    //遍历lis数组中每个li
    for(var i=0;i<len;i++){
        lis[i]='<li data-i="'+lis[i].dataset.i+'">'+lis[i].innerHTML+"</li>";
    }

    //lis中都变成了li元素的字符串
    ul.innerHTML=lis.join("");
</script>

</body>
</html>

wth_xk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义属性实现摇号排序

Title Eric Scott Jerry Tom Rose John Smith Andy //按id找到ul，保存在变量ul中 var ul=document.getElementById("queue"); //找到ul下所有li，保存在lis中 var lis=ul.getElem
复制链接

扫一扫