So wählen Sie ein Element aus, das keine bestimmte Klasse hat

90

Ich frage mich, wie ich ein Element auswählen soll, das keine bestimmte Klasse hat, und zwar mit JavaScript, nicht mit jQuery.

Zum Beispiel habe ich diese Liste:

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

und ich wähle die erledigte Aufgabe aus durch:

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

Aber dann bin ich mir nicht sicher, wie ich das Listenelement auswählen soll, das diese Klassen nicht hat.

Jaeeun Lee
quelle

Antworten:

165

Dies wählt das zweite LIElement aus.

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

oder

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

Beispiel:

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

Nick Grealy
quelle
17

So wählen Sie das aus <li>, das noch completedkeine selectedKlasse hat:

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

Geige

http://jsfiddle.net/Z8djF/

BeNdErR
quelle
So machen Sie das Gegenteil : Wählen Sie alle Elemente aus, die beide completedund eine selectedKlasse haben.
user2284570
@ user2284570 schreibe einfach beide Klassen ohne Leerzeichen: li.completed.selected-> dies wird mit allen liElementen übereinstimmen , die eine completedAND- selectedKlasse haben
BeNdErR
9

Sie können den :not()Selektor ausprobieren

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

http://jsfiddle.net/UM3j5/

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

Versuchen Sie stattdessen, eine Reihe von Kindern der Eltern zu erhalten:

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

Dann schleifen / suchen Sie sie nach Bedarf.

Crunch
quelle