Как проверить, не имеет ли элемент определенного класса?


232

Как я могу проверить, если нет класса. Например, я знаю, как проверить, есть ли у него класс «тест», но как мне проверить, нет ли у него класса «тест»?

if($(this).hasClass("test")){
}

Ответы:


484
if (!$(this).hasClass("test")) {

34
В духе TIMTOWTDI вот ужасное решение: if($(this).is(":not(.test)"))> :)
Phrogz 20.10.11

6
TIMTOWTDIBSCINABTE
Fizzix

25
В случае, если кто-то задается вопросом: есть больше, чем один способ сделать это, но иногда последовательность не плохая вещь.
Капитан Гипертекст

145

Ответ sdleihssirhc, конечно, правильный для случая в вопросе, но просто для справки, если вам нужно выбрать элементы, которые не имеют определенного класса, вы можете использовать not selector:

// select all divs that don't have class test
$( 'div' ).not( ".test" );
$( 'div:not(.test)' );  // <-- alternative 

8
ИМХО твой ответ самый лучший. Если ответ sdleihssirhc верен, то этот вопрос не имеет ничего общего с jQuery и будет лучше сформулирован как «учитывая какое-то условие, как мне проверить, что это условие НЕ истинно в Javascript». Что мы хотим с jQuery, так это работать с целыми коллекциями элементов DOM так же просто, как и с отдельными объектами. Ваш ответ дает именно это решение. +1
Стейн де Витт

1
@byronyasgur В контексте исходного вопроса автор хотел проверить, не содержит ли определенный известный элемент этот класс. Этот код выбирает все элементы, которые не имеют класса, поэтому он не решит проблему автора. Я не помню, почему я отправил это во-первых.
JJJ

14

Выберите элемент (или группу элементов), имеющий класс «abc», не имеющий класс «xyz»:

    $('.abc:not(".xyz")')

При выборе обычного CSS вы можете использовать .abc:not(.xyz).


6

используйте метод .not () и проверьте наличие атрибута:

$('p').not('[class]');

Проверьте это здесь: http://jsfiddle.net/AWb79/


8
Это совершенно неправильно. Скобки не для классов, но используются для селекторов, идентифицирующих атрибуты.
Misterparker

1
На самом деле это совершенно верно. «[Класс]» правильно идентифицирует атрибут (не) имеющий класс.
Дебора

Классы @Misterparker являются атрибутами.
Мэтью Сира

это проверяет, присутствует ли атрибут, а не случай, если у элемента есть определенный класс, как в значении класса
Марк

6

Вы можете попробовать это:

<div id="div1" class="myClass">there is a class</div>
<div id="div2"> there is no class2 </div>

$(document).ready(function(){
    $("#div2").not('.myClass');  // do not have `myClass` class.
});

Этот ответ не добавляет никакой ценности странице, он был опубликован на 7 лет раньше. Пожалуйста, никогда не публикуйте только код и дублирующийся контент.
mickmackusa

0

Есть более сложные сценарии, где это не работает. Что если вы хотите выбрать элемент с классом A, который не содержит элементов с классом B. В конечном итоге вам понадобится что-то более похожее на:

Если родительский элемент не содержит определенный дочерний элемент; JQuery


0

Прочитав это через 6 лет позже, я подумал, что я тоже попробую , тоже в духе TIMTOWTDI ...: D, надеясь, что это неправильный 'JS etiquette'.

Я обычно устанавливаю переменную с условием, а затем обращаюсь к ней позже.

// var set up globally OR locally depending on your requirements
var hC;

function(el) {
  var $this = el;
  hC = $this.hasClass("test");

  // use the variable in the conditional statement
  if (!hC) {
    //
  }
}

Хотя я должен упомянуть, что я делаю это, потому что я в основном использую условный троичный оператор и хочу чистый код. Так что в этом случае все, что у меня есть, это:

hC ? '' : foo(x, n) ;
   // OR -----------
!hC ? foo(x, n) : '' ;

...вместо этого:

$this.hasClass("test") ? '' : foo(x, n) ;
   // OR -----------
(!$this.hasClass("test")) ? foo(x, n) : '' ;

0

Я не знаю почему, но принятый ответ не работал для меня. Вместо этого это сработало:

if ($(this).hasClass("test") !== false) {}

Это фактически проверяет, имеет ли он класс «test». Чтобы проверить, не имеет ли он класса «test», вам нужно иметь «=== false» или «! == true» вместо «! == false».
Лиза Черилли
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.