Jak wybrać element, który nie ma określonej klasy


90

Zastanawiam się, jak wybrać element, który nie ma określonej klasy za pomocą JavaScript, a nie jQuery.

Na przykład mam taką listę:

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

i zaznaczam ukończone zadanie poprzez:

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

Ale wtedy nie jestem pewien, jak wybrać element listy, który nie ma tych klas.

Odpowiedzi:


165

Spowoduje to wybranie drugiego LIelementu.

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

lub

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

Przykład:

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

Aby wybrać to <li>, co nie ma completedani selectedklasy:

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

Skrzypce

http://jsfiddle.net/Z8djF/


Jak zrobić odwrotnie : to znaczy wybrać wszystkie elementy, które mają oba elementy completedi selectedklasę?
user2284570

@ user2284570 po prostu napisz obie klasy bez spacji: li.completed.selected-> to dopasuje wszystkie lielementy, które mają klasę 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

Spróbuj zamiast tego uzyskać tablicę dzieci rodzica:

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

Następnie zapętlić / przeszukać je w razie potrzeby.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.