if 문에서 여러 값에 대한 JQuery .hasClass

81

다음과 같은 간단한 if 문이 있습니다.

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

// do stuff 

}

이것은 예상대로 작동합니다. 그러나 태그 if statement에 클래스가 있는지 확인 하기 위해 에 클래스를 더 추가하고 싶습니다 <html>. 모두가 아니라 적어도 하나의 클래스가 있어야하지만 더 많을 수 있도록 필요합니다.

내 유스 케이스는 I (예 : 클래스를 가지고있다 m320, m768나는 단지 그 특정 폭 (클래스)의 경우 특정 jQuery를 실행할 수 있도록 다양한 뷰포트의 폭에 대한 추가 참조).

지금까지 시도한 내용은 다음과 같습니다.

1.

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

// do stuff 

}

2.

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

 // do stuff 

}

삼.

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

 // do stuff 

    }

이들 중 어느 것도 작동하지 않는 것 같습니다. 내가 뭘 잘못하고 있는지 확실하지 않지만 구문이나 구조 일 가능성이 큽니다.

— 대니 잉글랜드
소스

1

API 작동 방식을 추측하는 대신 문서를 읽어야합니다. api.jquery.com/hasclass 또한 개발 중에 개발자 콘솔을 편리하게 열어야합니다.

— 광기의 절벽

jQuery hasClass ()

— Stephan Weinhold

74

두 번째 시도에서 괄호를 엉망으로 만들었습니다.

var $html = $("html");

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

  // do stuff 

}

— 제임스 몽 타뉴
소스

6

$('html')여러 번 조회하는 대신 변수에 캐시해야합니다 .

— epascarello

1

@epascarello 매우 사실이며 후세에 대한 답변을 업데이트합니다.

— James Montagne

162

is()대신 사용할 수 있습니다 hasClass().

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

— Elclanrs
소스

3

예 hasClass()는 아마도 더 빠르지 만 is()대부분의 경우 훨씬 더 편리합니다

— elclanrs

1

BTW 여기에 우리의 성능 벤치 마크를 볼 수 있습니다 is()및hasClass()

— Jignesh Gohel

1

따라서 훨씬 느리지 만 전반적으로 매우 빠릅니다. 스캔되는 항목이 몇 개만 있다면 훨씬 깔끔한 코드에 큰 문제가 아닌 것 같습니다.

— jerclarke

27

재미를 위해 여러 클래스 이름 중 하나를 확인하는 약간의 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/

— jfriend00
소스

훌륭합니다. 이것은 잘 작동합니다 ... 크로스 브라우저도 마찬가지입니다! FF 및 IE에서 테스트되었습니다.

— crmpicco

.addClass 및 .removeClass ()에 대한 jQuery 규칙을 준수하도록 약간의 모드를 만들었습니다. ( stackoverflow.com/a/14887517/170456 )

— CyberMonk 2013

25

이것은 또 다른 해결책이 될 수 있습니다.

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

jsperf.com 에 따르면 매우 빠릅니다.

— 콜자
소스

아주 좋아, 훨씬 빠릅니다!

— Philip

9

이것은 'ZZZm320WWW'클래스와도 일치합니다. ... match (/ \ b (m320 | m768) \ b /)를 시도하십시오. 여기서 \ b는 단어의 시작과 끝과 일치합니다.

— Juan Lanus 2014

후속 조치 (7 년 후 :)). 이것은 훌륭하게 작동하지만 정의한 html 요소에 클래스가없는 경우 'Undefined의 "match"속성을 읽을 수 없음'오류가 발생합니다. 이 경우 요소에 'class'속성이 있는지 테스트합니다 (또는 'class'속성이 null이 아닌지 테스트).

— Sanya

5

이 모든 다른 옵션으로 다른 성능 측면에 대해 궁금해하는 사람을 위해 여기에 jsperf 케이스를 만들었습니다. jsperf

요컨대, 사용 element.hasClass('class')이 가장 빠릅니다.

차선책은 elem.hasClass('classA') || elem.hasClass('classB'). 이것에 대한 참고 사항 : 주문이 중요합니다! 클래스 'classA'가 발견 될 가능성이 더 높으면 먼저 나열하십시오! OR 조건문 중 하나가 충족되는 즉시 반환됩니다.

지금까지 최악의 성능은 element.is('.class').

jsperf에는 CyberMonk 의 기능 과 Kolja의 솔루션 도 나열되어 있습니다 .

— 라이언 스테퍼
소스

정말 흥미로운! jsperf에 대해 전혀 몰랐습니다. 다양한 변형을 설명해 주셔서 감사합니다.

— Danny Englander

3

다음은 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') 적어도 하나의 논쟁을 가정하므로 방탄이 필요합니다.

— CyberMonk
소스

0

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

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

— 아데 네오
소스

1

그렇게하려는 경우 jquery를 사용하여 요소를 가져 오는 이유는 무엇입니까?

— James Montagne

글쎄요,하지만 적어도 한 번만 수업을 받나요? 약간의 jQuery가 없으면 너무 지루해 보였기 때문에 getElementsByTagName을 jQ 마법으로 대체했습니다!

— adeneo

0

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

— Ron Sims II
소스

0

두 클래스가 모두 필요한 경우입니다. 또는 논리에 대해 ||

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

필요에 따라 자유롭게 최적화하십시오.

— qwerty_igor
소스

1

이것은 잘못된 것입니다. 첫 번째 예제는 메서드가 입력을 제대로 삭제하지 않고 전체 문자열이 클래스 이름이라고 생각하기 때문에 작동합니다. 수업 순서가 다르거 나 바로 옆에 있지 않으면 작동하지 않습니다. 예를 참조하십시오 : jsfiddle.net/0d57ekty

— MightyPork

@MightyPork 확인 감사합니다. 당신 말이 맞아요, 클래스별로 만 사용해야합니다

— qwerty_igor

-1

이 시도:

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

// do stuff 

}

— 로버트 로진 스키
소스

Stack Overflow에 오신 것을 환영합니다! 이 코드가 OP에 도움이되는 이유에 대한 설명을 추가하십시오. 이는 향후 시청자가 배울 수있는 답을 제공하는 데 도움이 될 것입니다. 자세한 내용 은 응답 방법을 참조하십시오 .

— Heretic Monkey