Cómo seleccionar un elemento que no tiene una clase específica


90

Me pregunto cómo seleccionar un elemento que no tiene una clase específica usando JavaScript, no jQuery.

Por ejemplo, tengo esta lista:

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

y selecciono la tarea completada por:

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

Pero entonces no estoy seguro de cómo seleccionar el elemento de la lista que no tiene esas clases.

Respuestas:


165

Esto selecciona el segundo LIelemento.

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

o

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

Ejemplo:

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

Para seleccionar la <li>que no tiene completedni selectedclase:

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

Violín

http://jsfiddle.net/Z8djF/


¿Cómo hacer lo contrario : es decir, seleccionar todos los elementos que tienen ambos completedy selectedclase?
user2284570

@ user2284570 simplemente escriba ambas clases sin espacios en blanco: li.completed.selected-> esto coincidirá con todos los lielementos que tienen la clase 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

En su lugar, intente obtener una matriz de los hijos de los padres:

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

Luego, haz un bucle / búscalos según sea necesario.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.