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

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

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

Если вы хотите сделать это без jQuery, «HasClass» с javascript?

Oriol 12.06.2016 20:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
173
1
152 845
8
Перейти к ответу Данный вопрос помечен как решенный

Ответы 8

Ответ принят как подходящий

Воспользуйтесь методом 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')

Я не согласен. Документация организована по категориям, но вы также можете легко увидеть все методы в алфавитном порядке. Все идет с примерами, а в разделе комментариев обычно проясняется все, что упущено. jQuery имеет МНОЖЕСТВО отличных функций и утилит, и требуется некоторое обучение, чтобы открыть их все. -EDIT- В этом есть смысл, это определенно долгий путь.

Trafalmadorian 20.05.2010 09:19

@Trafalmadorian, я удалил свой исходный комментарий, потому что ситуация изменилась. Первоначально вы публиковали все до -EDIT-, и я ответил, что мой комментарий о качестве документации больше не актуален, а относится к их предыдущей (MediaWiki) системе. Затем вы удалили свой предыдущий комментарий и откатились с -EDIT-. Я надеюсь, что эта очистка будет немного более ясной и менее вводящей в заблуждение будущих читателей.

eyelidlessness 20.05.2010 22:05

@daniloquio, это если вы перейдете прямо на api.jquery.com ... по какой-то причине сайт все еще ссылается на ужасную версию вики на docs.jquery.com

eyelidlessness 18.08.2012 00:02

из Часто задаваемые вопросы

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

или же:

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

осторожно с .is () - «Метод is () в jQuery вернет истину, если ЛЮБОЙ из элементов в текущей коллекции соответствует ЛЮБОМУ из элементов в коллекции на основе is» - bennadel.com/blog/…

zack 08.09.2010 15:38

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

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

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

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

Без 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!

почему ты делаешь ...&&!!((' '+e.classname+' ').indexOf(' '+c+' ')+1), а не только &&!(' '+e.classname+' ').indexOf(' '+c+' ')?

Blexy 28.04.2014 22:49

Поскольку indexOf возвращает -1, класс не существует. Если я сделаю !!-1, это будет true. Поскольку я делаю !!-1+1, это будет ложно. Лучше был бы ...&&!!~(' '+e.className+' ').indexOf(' '+c+' '), но тогда я его не вспомнил.

Ismael Miguel 29.04.2014 01:59

Извините, я имел ввиду ...&&~(' '+e.className+' ').indexOf(' '+c+' ')

Ismael Miguel 29.04.2014 12:57
 $('.segment-name').click(function () {
    if ($(this).hasClass('segment-a')){
        //class exist
    }
});

В моем случае я использовал функцию jQuery «is», у меня был элемент 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();
    }

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

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

Другие вопросы по теме