jQuery hasClass () - перевірити наявність декількох класів


162

З:

if(element.hasClass("class"))

Я можу перевірити один клас, але чи є простий спосіб перевірити, чи є у "елемента" якийсь із багатьох класів?

Я використовую:

if(element.hasClass("class") || element.hasClass("class") ... )

Що не дуже погано, але я думаю про щось на кшталт:

if(element.hasClass("class", "class2")

Що, на жаль, не працює.

Чи є щось подібне?

Відповіді:


227

Як щодо:

element.is('.class1, .class2')

9
Ні, тому що це шукало б елементів, які мають обидва класи. Я думаю, що Марсель шукає елементи з одним або кількома рядами класів.
Giles Van Gruisen

Щойно помітив, що в мене там 4 id = "привіт". Виправлена ​​версія для того, щоб зробити валідаторів щасливими: jsbin.com/uqoku/2/edit
Matchu

1
@Matchu У мене виникло те саме питання, .hasClass()але ваше рішення, схоже, зробило трюк, спасибі
Nasir

11
Це не спрацювало для мене, але все- $('element').is('.class1.class2')таки
iamchriswick

6
@iamchriswick: Це дещо інше, ніж те, про що просили ОП. .class1.class2буде відповідати елементам, які мають обидва класи, але вони шукали елементи, які відповідають будь-якому класу.
Матчу

291
element.is('.class1, .class2')

працює, але це на 35% повільніше, ніж

element.hasClass('class1') || element.hasClass('class2')

введіть тут опис зображення

Якщо ви сумніваєтесь у тому, що я говорю, ви можете перевірити на jsperf.com .

Сподіваюся, це допоможе комусь.


16
На 19% повільніше, велика справа. Програмісти дорожчі.
Nowaker

21
@DamianNowak, якщо ці програмісти не бажають писати, що становить тривіальну кількість більше коду, вони, ймовірно, не дуже дорогі.
Akkuma

2
... гм, але я просто запустив це в jsperf для Chrome 21.0.1180, і метод (() зараз приблизно на 20% швидший. Але hasClass () здається більш читабельним.
Данял Айтекін

3
@psychobrm: Якщо вам доведеться перевірити відразу 10 класів, вам дійсно потрібно впорядкувати назви класів. Причин для такої дурниці немає. :)
cHao

5
Особисто я не бачу необхідності оптимізації продуктивності. 12000 операцій в секунду мені здається досить швидкими. Я б сказав, використовуйте те, що виглядає вам приємніше. Оптимізуйте ефективність, коли виникає потреба.
3Dom

38
$.fn.extend({
    hasClasses: function (selectors) {
        var self = this;
        for (var i in selectors) {
            if ($(self).hasClass(selectors[i])) 
                return true;
        }
        return false;
    }
});

$('#element').hasClasses(['class1', 'class2', 'class3']);

Це слід зробити, просто і легко.


2
Вам не вистачає var у в (для я в селекторах), створюючи таким чином глобальний.
gremwell

4
Трохи незначне значення, але селектори параметрів дійсно повинні бути названі класами або classNames , оскільки це те, що ви передаєте, а не селектори. Селектори матимуть крапку перед собою, як у $ ('# елемент'). HasClasses (['. Class1', '.class2', '.class3']);
jbyrd

10

filter () - інший варіант

Зменшіть набір відповідних елементів до тих, які відповідають селектору або пройдуть тест функції.

$(selector).filter('.class1, .class2'); //Filter elements: class1 OR class2

$(selector).filter('.class1.class2'); // Filter elements: class1 AND class2


4

ось відповідь, яка відповідає синтаксису

$(element).hasAnyOfClasses("class1","class2","class3")
(function($){
    $.fn.hasAnyOfClasses = function(){
        for(var i= 0, il=arguments.length; i<il; i++){
            if($self.hasClass(arguments[i])) return true;
        }
        return false;
    }
})(jQuery);

це не найшвидший, але його однозначне рішення і я віддаю перевагу. лавка: http://jsperf.com/hasclasstest/10


Error: $self is not defined
bagofmilk

1
@bagofmilk Мою відповідь відредагували інші, оскільки я написав її 6 років тому. Оскільки я не використовував jQuery протягом багатьох років, я не знаю, що саме було призначено для редагування, але спочатку я мав var $self = $(this);якраз перед циклом for-loop
Генрік

1

Як що до цього,

$.fn.extend({
     hasClasses: function( selector ) {
        var classNamesRegex = new RegExp("( " + selector.replace(/ +/g,"").replace(/,/g, " | ") + " )"),
            rclass = /[\n\t\r]/g,
            i = 0,
            l = this.length;
        for ( ; i < l; i++ ) {
            if ( this[i].nodeType === 1 && classNamesRegex.test((" " + this[i].className + " ").replace(rclass, " "))) {
                return true;
            }
        }
        return false;
    }
});

Простий у використанні,

if ( $("selector").hasClasses("class1, class2, class3") ) {
  //Yes It does
}

І здається, це швидше, http://jsperf.com/hasclasstest/7


1

А як на рахунок:

if($('.class.class2.class3').length > 0){
    //...
}

3
Вам це не потрібно > 0. Якщо довжина не дорівнює нулю, вона поверне справжнє значення.
Ісаак Любов

1

jQuery

if( ['class', 'class2'].some(c => [...element[0].classList].includes(c)) )

Ваніль JS

if( ['class', 'class2'].some(c => [...element.classList].includes(c)) )

0

використовувати функцію js match () за замовчуванням:

if( element.attr('class') !== undefined && element.attr('class').match(/class1|class2|class3|class4|class5/) ) {
  console.log("match");
}

щоб використовувати змінні в regexp, використовуйте це:

var reg = new RegExp(variable, 'g');
$(this).match(reg);

до речі, це найшвидший спосіб: http://jsperf.com/hasclass-vs-is-stackoverflow/22


Найкраще подобається ця відповідь, хоча я підозрюю, що прокручування класів та використання рядкового індексу тесту може бути ще швидшим ...
terraling


0

Можна зробити так:

if($(selector).filter('.class1, .class2').length){
    // Or logic
}

if($(selector).filter('.class1, .class2').length){
    // And logic
}

-1

Це працювало для мене:

$('.class1[class~="class2"]').append('something');

3
Ця відповідь не має нічого спільного з заданим питанням.
Єзен Томас

Це насправді чудова відповідь. Наведений вище синтаксис селектора захоплює всі елементи як класу1, так і класу2. Тоді ви можете робити все, що вам подобається, у цьому випадку додайте. Не перевіряли продуктивність порівняно з іншими методами, але синтаксис є приємним та стислим.
Тім Райт

2
@TimWright Це жахлива відповідь. Нормальний спосіб вибору елемента з 2 класами - це $('.class1.class2')не потрібно використовувати селектор атрибутів для другого класу. Крім того, питання полягає в тому, як вибрати елемент одним із будь-яких, а не всіх класів.
Усі працівники мають важливе значення
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.