[英]How to select element by 'role' attribute and filter by class with vanilla JS?
标记:
<ul>
<li role="presentation" class="active">
<a href="#1" aria-controls="1" role="tab">How to Install for iPad</a>
</li>
<li role="presentation">
<a href="#2" aria-controls="2" role="tab">How to Install for Mac</a>
</li>
<li role="presentation">
<a href="#3" aria-controls="3" role="tab">How to Install for PC</a>
</li>
</ul>
当我使用document.querySelectorAll('[role =“presentation”]'); 结果是数组[li.active,li,li]
我如何删除.active类并使用普通JS w / o JQuery将其附加到这些li中的任何其他类更简单的方法?
尝试这个:
// remove active class from all elements
document.querySelectorAll('[role="presentation"]').forEach(function (el){
el.classList.remove("active");
});
// add class 'active' to last element
document.querySelectorAll('[role="presentation"]:last-of-type')[0].classList.add("active")
笔记:
你可以尝试这样的事情:
var ele = document.querySelectorAll('[role="presentation"]');
ele[0].classList.remove("active"); //Remove active class for first element
ele[ele.length- 1].classList.add("active"); //Apply active class for last element
console.log(ele)
var eleLi = document.querySelectorAll('[role="presentation"]');
for (var i = 0; i < eleLi.length; i++) {
//remove class active
eleLi[i].classList.remove('active');
}
//x is an index of li that you want to add the class. Such as 0,1,2
var x = eleLi.length - 1;
//add class active
eleLi[x].classList.add('active');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.