Comment sélectionner un élément qui n'a pas de classe spécifique


90

Je me demande comment sélectionner un élément qui n'a pas de classe spécifique en utilisant JavaScript, pas jQuery.

Par exemple, j'ai cette liste:

<ul id="tasks">
  <li class="completed selected">One Task</li>
  <li>Two Task</li>
</ul>

et je sélectionne la tâche terminée en:

var completeTask = document.querySelector("li.completed.selected");

Mais alors je ne sais pas comment sélectionner l'élément de liste qui n'a pas ces classes.

Réponses:


165

Cela sélectionne le deuxième LIélément.

document.querySelector("li:not([class])")

ou

document.querySelector("li:not(.completed):not(.selected)")

Exemple:

// select li which doesn't have a 'class' attribute...
console.log(document.querySelector("li:not([class])"))

// select li which doesn't have a '.completed' and a '.selected' class...
console.log(document.querySelector("li:not(.completed):not(.selected)"))
 <ul id="tasks">
    <li class="completed selected">One Task</li>
    <li>Two Task</li>
  </ul>


17

Pour sélectionner celui <li>qui n'a completedni selectedclasse:

document.querySelector("li:not(.completed):not(.selected)");

Violon

http://jsfiddle.net/Z8djF/


Comment faire l'inverse : c'est-à-dire sélectionner tous les éléments qui ont à la fois completedet selectedclass?
user2284570

@ user2284570 écrivez simplement les deux classes sans espaces: li.completed.selected-> cela correspondra à tous les liéléments qui ont la classe completedANDselected
BeNdErR


2
document.querySelectorAll('[wf-body=details] input:not(.switch):not(.btn)').forEach(function(e){
    // do whatever you want. with 'e' as element :P
});

1

Essayez plutôt d'obtenir un tableau des enfants du parent:

var completeTask = document.querySelector("#tasks").childNodes;

Puis bouclez / recherchez-les si nécessaire.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.