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


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

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

// do stuff 

}

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

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

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

1.

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

// do stuff 

}

2.

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

 // do stuff 

}

3.

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

 // do stuff 

    }

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

10 65

10 ответов:

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

var $html = $("html");

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

  // do stuff 

}

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

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

для удовольствия, я написал немного jQuery add-on метод, который будет проверять для любого из нескольких имен классов:

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

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

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

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

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

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

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

худшая производительность на сегодняшний день была с помощью element.is('.class').

также перечислены в jsperf-это CyberMonk это!--5--> и личное дело.

вот небольшое изменение ответа, предложенного 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 () and .removeClass(). например, .hasAnyClass('m320 m768') Нужна пуленепробиваемость, конечно, так как она предполагает хотя бы один аргумент.

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

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

метод 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();
});

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

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

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

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

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

попробуйте это:

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

// do stuff 

}