Определите, есть ли у элемента класс CSS с помощью jQuery

Question

Я работаю с jQuery и смотрю, есть ли простой способ определить, имеет ли элемент определенный класс CSS, связанный с ним.

У меня есть идентификатор элемента и класс CSS, который я ищу. Мне просто нужно иметь возможность в выражении if сделать сравнение, основанное на существовании этого класса в элементе.

Answer 1

Используйте метод hasClass:

jQueryCollection.hasClass(className);

или

$(selector).hasClass(className);

Аргументом (очевидно) является строка, представляющая класс, который вы проверяете, и он возвращает логическое значение (поэтому он не поддерживает цепочку, как большинство методов jQuery).

Примечание: Если вы передадите аргумент className, содержащий пробел, он будет буквально сопоставлен со строкой className элементов коллекции. Так что, если, например, у вас есть элемент,

<span class="foo bar" />

тогда это вернет true:

$('span').hasClass('foo bar')

и они вернутся false:

$('span').hasClass('bar foo')
$('span').hasClass('foo  bar')

Answer 2

из FAQ

elem = $("#elemid");
if (elem.is (".class")) {
   // whatever
}

или

elem = $("#elemid");
if (elem.hasClass ("class")) {
   // whatever
}

Answer 3

Что касается отрицания, если вы хотите знать, что элемент не имеет класса, вы можете просто сделать, как сказал Марк.

if (!currentPage.parent().hasClass('home')) { do what you want }

Answer 4

В интересах помощи любому, кто приземлится здесь, но на самом деле ищет jQuery бесплатный способ сделать это:

element.classList.contains('your-class-name')

Answer 5

без jQuery:

var hasclass=!!(' '+elem.className+' ').indexOf(' check_class ')+1;

Или:

function hasClass(e,c){
    return e&&(e instanceof HTMLElement)&&!!((' '+e.className+' ').indexOf(' '+c+' ')+1);
}
/*example of usage*/
var has_class_medium=hasClass(document.getElementsByTagName('input')[0],'medium');

Это намного быстрее, чем jQuery!

Answer 6

В моем случае я использовал функцию 'is' jQuery, у меня был HTML-элемент с различными классами CSS, я искал определенный класс в середине, поэтому я использовал "is" хороший Альтернатива для проверки класса, динамически добавляемого в элемент HTML, который уже имеет другие классы CSS, это еще одна хорошая альтернатива.

простой пример:

 <!--element html-->
 <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

 <!--jQuery "is"-->
 $('#menu').is('.cbp-spmenu-open');

расширенный пример:

 <!--element html-->
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

   <!--jQuery "is"-->
    if($('#menu').is('.cbp-spmenu-bottom.cbp-spmenu-open')){
       $("#menu").show();
    }

Answer 7

 $('.segment-name').click(function () {
    if($(this).hasClass('segment-a')){
        //class exist
    }
});

Answer 8

Проверьте официальную страницу часто задаваемых вопросов по jQuery:

Как проверить, имеет ли элемент перикулярный класс или нет