Comment sélectionner un élément par l'attribut 'role' et filtrer par classe avec JS vanilla?

Question

Markup:

<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> 

Lorsque j'utilise document.querySelectorAll ('[role = "présentation"]'); le résultat est un tableau [li.active, li, li]

Comment puis-je supprimer la classe .active et l'attacher à un autre de ces li avec JS plaine w/o JQuery plus façon la plus simple?

Answer 1

Essayez ceci:

// 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") 

Notes:

• 'classList' ne fonctionne pas dans IE9;
• Je pense que vous devez modifier la ligne de classe en fonction de vos besoins.

Answer 2

Vous pouvez essayer quelque chose comme ceci:

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)