JQuery.hasClass для нескольких значений в выражении if

У меня есть простая инструкция if:

if ($('html').hasClass('m320')) {

// do stuff 

}

Это работает так, как ожидалось. Тем не менее, я хочу добавить больше классов в if statement, чтобы проверить, присутствует ли какой-либо из классов в теге <html>. Мне нужно это, чтобы не все из них, а просто присутствие хотя бы одного класса, но это может быть больше.

Мой вариант использования заключается в том, что у меня есть классы (например, m320, m768), добавленные для различных ширины видового экрана, поэтому я хочу только выполнить определенный JQuery, если это определенная ширина (класс).

Вот что я пробовал до сих пор:

if ($('html').hasClass('m320', 'm768')) {

// do stuff 

}

if ($('html').hasClass('m320')) || ($('html').hasClass('m768')) {

 // do stuff 

}

 if ($('html').hasClass(['m320', 'm768'])) {

 // do stuff 

    }

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

Ответ 1

У вас были только что испорченные круглые скобки во второй попытке.

var $html = $("html");

if ($html.hasClass('m320') || $html.hasClass('m768')) {

  // do stuff 

}

Ответ 2

Вы можете использовать is() вместо hasClass():

if ($('html').is('.m320, .m768')) { ... }

Ответ 3

Для удовольствия я написал небольшой метод добавления jQuery, который будет проверять наличие одного из нескольких имен классов:

$.fn.hasAnyClass = function() {
    for (var i = 0; i < arguments.length; i++) {
        if (this.hasClass(arguments[i])) {
            return true;
        }
    }
    return false;
}

Затем в вашем примере вы можете использовать это:

if ($('html').hasAnyClass('m320', 'm768')) {

// do stuff 

}

Вы можете передать столько имен классов, сколько хотите.

Здесь расширенная версия, которая также позволяет передавать несколько имен классов, разделенных пробелом:

$.fn.hasAnyClass = function() {
    for (var i = 0; i < arguments.length; i++) {
        var classes = arguments[i].split(" ");
        for (var j = 0; j < classes.length; j++) {
            if (this.hasClass(classes[j])) {
                return true;
            }
        }
    }
    return false;
}

if ($('html').hasAnyClass('m320 m768')) {
    // do stuff 
}

Рабочая демонстрация: http://jsfiddle.net/jfriend00/uvtSA/

Ответ 4

Это может быть другое решение:

if ($('html').attr('class').match(/m320|m768/)) {  
  // do stuff   
}

в соответствии с jsperf.com тоже довольно быстро.

Ответ 5

Для тех, кто задается вопросом о некоторых аспектах производительности со всеми этими различными параметрами, я создал здесь случай jsperf: jsperf

Короче говоря, использование element.hasClass('class') является самым быстрым.

Следующая лучшая ставка использует elem.hasClass('classA') || elem.hasClass('classB'). Заметка об этом: порядок имеет значение! Если класс "classA", скорее всего, будет найден, перечислите его первым! Операторы OR возвращаются, как только один из них встречается.

Наихудшая производительность на сегодняшний день - использование element.is('.class').

Также перечислены в jsperf функция CyberMonk и решение Kolja.

Ответ 6

Ниже приведен небольшой вариант ответа jfriend00:

$.fn.hasAnyClass = function() {
    var classes = arguments[0].split(" ");
    for (var i = 0; i < classes.length; i++) {
        if (this.hasClass(classes[i])) {
            return true;
        }
    }
    return false;
}

Позволяет использовать тот же синтаксис, что и .addClass() и .removeClass(). например, .hasAnyClass('m320 m768') Разумеется, нужна бронезащита, поскольку она предполагает хотя бы один аргумент.

Ответ 7

var classes = $('html')[0].className;

if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) {
    //do something
}

Ответ 8

Метод hasClass примет массив имен классов в качестве аргумента, вы можете сделать что-то вроде этого:

$(document).ready(function() {
function filterFilesList() {
    var rows = $('.file-row');
    var checked = $("#filterControls :checkbox:checked");

    if (checked.length) {
        var criteriaCollection = [];

        checked.each(function() {
            criteriaCollection.push($(this).val());
        });

        rows.each(function() {
            var row = $(this);
            var rowMatch = row.hasClass(criteriaCollection);

            if (rowMatch) {
                row.show();
            } else {
                row.hide(200);
            }
        });
    } else {
        rows.each(function() {
            $(this).show();
        });
    }
}

    $("#filterControls :checkbox").click(filterFilesList);
    filterFilesList();
});

Ответ 9

Я тестировал несколько классов в параметре метода hasClass и работает как ожидалось.

$('el').hasClass('first-class second-class');

Это, если вам нужны оба класса. Для любой или логики просто используйте ||

$('el').hasClass('first-class') || $('el').hasClass('second-class')

Не стесняйтесь оптимизировать по мере необходимости

Ответ 10

Попробуйте следующее:

if ($('html').hasClass('class1 class2')) {

// do stuff 

}