当前位置：网站首页>对li类数组对象随机添加特性，并进行排序

对li类数组对象随机添加特性，并进行排序

2022-04-23 07:34:00 【beinlife】

<!DOCTYPE HTML>
<html>
<head>
<title>修改元素的属性</title>
<meta charset="utf-8" />

<script >

window.οnlοad=function(){
//获取ul下的所有li
var lis=document.querySelectorAll("ul li");
var nums=[];
//反复生成随机数:必须和lis的个数一样
while(nums.length < lis.length) {
var n=parseInt(Math.random()*lis.length+1);
if(nums.indexOf(n)==-1){
nums.push(n);
}
}
/*遍历生产的随机数，给每个li添加特性*/
for (var i = 0; i < nums.length; i++) {
lis[i].setAttribute("data-j",nums[i]);
}
/*
问题1：lis是类数组对象，没有sort方法
解决1：把类数组对象转化为标准数组对象
问题2：比较器*/
lis=Array.prototype.slice.call(lis);
lis=lis.sort(function(li1,li2){
var n1=parseInt(li1.getAttribute("data-j"));
var n2=parseInt(li2.getAttribute("data-j"));
return n1-n2;
});
for (var i = 0; i < nums.length; i++) {
console.log(lis[i].getAttribute("data-j")+lis[i].innerHTML);
}

}

</script>

</head>
<body>
<!--1. 使用自定义属性实现摇号排名-->
<ul>
<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>
</body>
</html>

版权声明
本文为[beinlife]所创，转载请带上原文链接，感谢
https://blog.csdn.net/beinlife/article/details/53012320

边栏推荐

猜你喜欢

随机推荐