如何通过'角色'属性选择元素并通过类与香草JS过滤？

-1

<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（ '[角色= “呈现”]'）;结果是阵列 [li.active，LI，LI]

如何删除。主动类，并将其与纯JS附加到任何其他这些锂的W/O型的JQuery更简单的方法？

来源

2017-10-09 mixa_ru

请包括你试过的[mcve]。你在这里的工作顺序不是问题。 – zzzzBov

你究竟想要达到什么目的？你的问题听起来像是你想随机地将'.active'类移动到任何其他'li'元素上，但我猜这不是你真正想要的？ –

@JamesDonnelly，谢谢你的回复！我的目标是从第一个li关闭.active，并将其设置为最后一个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")

注：

'班级列表' 不会在IE9工作;
我认为你必须修改添加类行，这取决于你的需求。

来源

2017-10-09 14:59:43

你可以尝试这样的事情：

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)

来源

2017-10-09 14:55:28

如何通过'角色'属性选择元素并通过类与香草JS过滤？

回答

相关问题