当前位置：网站首页>Add random attributes to the Li class array objects and sort them

Add random attributes to the Li class array objects and sort them

2022-04-23 08:25:00 【beinlife】

<!DOCTYPE HTML>
<html>
<head>
<title> Modify the attributes of an element </title>
<meta charset="utf-8" />

<script >

window.οnlοad=function(){
// obtain ul All under li
var lis=document.querySelectorAll("ul li");
var nums=[];
// Generate random numbers repeatedly : It has to be with lis The numbers are the same
while(nums.length < lis.length) {
var n=parseInt(Math.random()*lis.length+1);
if(nums.indexOf(n)==-1){
nums.push(n);
}
}
/* Traverse the random number of production , For each li Add features */
for (var i = 0; i < nums.length; i++) {
lis[i].setAttribute("data-j",nums[i]);
}
/*
problem 1：lis Is a class array object , No, sort Method
solve 1： Convert class array objects into standard array objects
problem 2： The comparator */
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. Using custom attributes to achieve Yaohao ranking -->
<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://yzsam.com/2022/04/202204230734168899.html

边栏推荐

猜你喜欢

随机推荐