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

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

<code>if ($('html').hasClass('m320')) {

// do stuff 

}
</code>

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

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

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

1.

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

// do stuff 

}
</code>

2.

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

 // do stuff 

}
</code>

3.

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

 // do stuff 

    }
</code>

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

Ответы на вопрос(10)

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

// do stuff 

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

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

и он работает, как и ожидалось.

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

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

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

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

var $html = $("html");

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

  // do stuff 

}

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

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

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

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

Также в jsperf указанФункция CyberMonk, а такжеРешение Коли.

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

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

который проверит наличие любого из нескольких имен классов:

$.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/

$.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') Needs bulletproofing, of course, as it assumes at least one argument.

вы можете сделать что-то вроде этого:

$(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();
});

is() вместоhasClass():

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

ВАШ ОТВЕТ НА ВОПРОС