Як вибрати елемент, який не має конкретного класу


91

Мені цікаво, як вибрати елемент, який не має певного класу, використовуючи JavaScript, а не jQuery.

Наприклад, у мене є цей список:

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

і я вибираю виконане завдання за допомогою:

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

Але тоді я не впевнений, як вибрати елемент списку, який не має цих класів.

Відповіді:


166

Це вибирає другий LIелемент.

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

або

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

Приклад:

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

Щоб вибрати те, <li>що не має completedні selectedкласу:

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

Скрипка

http://jsfiddle.net/Z8djF/


Як зробити зворотне : тобто виділити всі елементи, які мають completedі selectedклас, і клас?
user2284570

@ user2284570 просто напишіть обидва класи без пробілів: li.completed.selected-> це збігатиметься з усіма liелементами, які мають клас completedІselected
BeNdErR



1

Натомість спробуйте отримати масив батьківських батьків:

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

Потім циклічно / шукайте їх за необхідності.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.