jQuery: проверить наличие нескольких классов у элемента

Вопрос

Я знаю, что в jQuery есть функция hasClass(), которая используется для того, чтобы проверить, есть ли у элемента заданный класс. На одной странице логика моего JavaScript допускает, что у одного элемента может быть много классов, например, 5 или больше. Мне необходимо писать много условий, которые будут проверять наличие нескольких классов. Сейчас я делаю так:

if($('#myElement').hasClass("classOne") && $('myElement').hasClass("classTwo")) {
    // ...
}

Но такие конструкции кажутся мне избыточными и плохо читаемыми. Хотелось бы работать с чем-то на подобии:

if($('#myElement').hasClass("classOne", "classTwo")) {
    // ...
}

Но это, увы, не работает. Какие будут советы?

Ответ №1

В том случае, если Вам необходимо выполнить действие при условии, что в элемента есть несколько классов сразу (то есть условие И, а не ИЛИ), можно пойти следующим путём:

if($('#myElement').is('.classOne, .classTwo')) {
    // ...
}

Код получается короче. Но имейте ввиду, что работает немного медленнее, чем вариант, который Вы использовали раньше.

А как же быть, если необходимо использовать условие ИЛИ? Вот функция, которая вернёт true в случае, если у элемента есть хотя бы один из классов:

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

Использовать так:

if($('#myElement').hasClasses(['classOne', 'classTwo', 'classThree'])) {
   // ...
};

3 комментария

Добавить комментарий


(обязательно)