jQuery has Class() - 둘 이상의 클래스를 확인합니다.

jQuery has Class() - 둘 이상의 클래스를 확인합니다.

포함:

if(element.hasClass("class"))

하나의 클래스를 확인할 수 있는데, "element"에 많은 클래스가 있는지 쉽게 확인할 수 있는 방법이 있습니까?

사용 중:

if(element.hasClass("class") || element.hasClass("class") ... )

그렇게 나쁘진 않지만, 저는 다음과 같은 것을 생각하고 있습니다.

if(element.hasClass("class", "class2")

안타깝게도 효과가 없습니다.

그런 게 있나요?

element.is('.class1, .class2')

작동하지만, 그것은 35% 더 느립니다.

element.hasClass('class1') || element.hasClass('class2')

이 jsbench.me 테스트도 참조하십시오.

어때요?

element.is('.class1, .class2')

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

$('#element').hasClasses(['class1', 'class2', 'class3']);

이것은 간단하고 쉽게 할 수 있을 것입니다.

filter(필터)는 다른 옵션입니다.

일치하는 요소 집합을 선택기와 일치하거나 함수의 테스트를 통과하는 요소 집합으로 줄입니다.

$(selector).filter('.class1, .class2'); //Filter elements: class1 OR class2

$(selector).filter('.class1.class2'); // Filter elements: class1 AND class2

이건 어때?

if (element.hasClass("class1 class2")

여기의 구문을 따르는 대답이 있습니다.

$(element).hasAnyOfClasses("class1","class2","class3")

(function($){
    $.fn.hasAnyOfClasses = function(){
        for(var i= 0, il=arguments.length; i<il; i++){
            if($self.hasClass(arguments[i])) return true;
        }
        return false;
    }
})(jQuery);

가장 빠르지는 않지만 명확하고 제가 선호하는 솔루션입니다. 벤치: http://jsperf.com/hasclasstest/10

다음은 어떻습니까?

if ($('.class.class2.class3').length) {
    //...
}

jQuery

if( ['class', 'class2'].some(c => [...element[0].classList].includes(c)) )

바닐라 JS

if( ['class', 'class2'].some(c => [...element.classList].includes(c)) )

이건 어때요?

$.fn.extend({
     hasClasses: function( selector ) {
        var classNamesRegex = new RegExp("( " + selector.replace(/ +/g,"").replace(/,/g, " | ") + " )"),
            rclass = /[\n\t\r]/g,
            i = 0,
            l = this.length;
        for ( ; i < l; i++ ) {
            if ( this[i].nodeType === 1 && classNamesRegex.test((" " + this[i].className + " ").replace(rclass, " "))) {
                return true;
            }
        }
        return false;
    }
});

사용이 간편하고,

if ( $("selector").hasClasses("class1, class2, class3") ) {
  //Yes It does
}

그리고 더 빠른 것 같습니다, http://jsperf.com/hasclasstest/7

이것은 꽤 오래되었지만, 이것에 대해 끝까지 들어보세요.

$.fn.extend({
  hasClasses: function (selectors) {
      // Setup
      const _id = $(this).attr('id'); // Preserve existing id
      const uuid = generateUUID();    // Create new id for query
      $(this).attr('id', uuid);       // Apply new id to element
     
      // Query to find if element has any of the classes
      const res = selectors.some(cls => !!$(`${uuid}.${cls}`).length);
      
      // Rollback on id 
      if (!_id) $(this).removeAttr("id"); // No Id to begin with
      else $(this).attr('id', _id);       // Preserve old id
      
      // Done
      return res;
    }
})

의 클래스 중 하나가 일치하는 항목을 찾는 대신selectors그리고 요소의 클래스 중 하나는 단순히 임시로 적용합니다.id(클라이언트) 요소로 이동하고 해당 임시 요소가 있는지 여부를 쿼리합니다.id그리고 에 나열된 클래스 중 하나.selectors.

이는 Kalel Wade와 Simon Arnold의 솔루션에서 영감을 얻었지만 성능은 약간 개선되었습니다(jsbench.me 참조).

메모

JSBENCH는 특정한 양의 문자나 단어를 저장할 수 없습니다.랜덤 단어를 비동기식으로 가져오는 데 문제가 있어서 수동으로 랜덤 단어를 가져와서 벤치를 사용할 수 있습니다.

편집:

나는 방금 이것의 구현을 위해 나는 의존하고 있다는 것을 알아차렸습니다.id비동기 호출을 사용합니다.동일한 시간에 ID로 요소를 쿼리해야 하는 경우 문제가 발생할 수 있습니다.hasClasses를 변경합니다.id.

이것을 피하기 위해 우리는 단지 독특한 것을 추가할 수 있습니다.uuid속성(단순히 다음과 같습니다.uuid).

다음은 수정 사항입니다.

$.fn.extend({
  hasClasses: function (selectors) {
    // Setup
    const uuid = generateUUID(); // Create new uuid to query later
    $(this).attr(uuid, "");      // Apply uuid to element for query

    // Query to find if element has any of the classes
    const res = selectors.some(cls => !!$(`[${uuid}].${cls}`).length);

    // Remove the uuid attribute
    $(this).removeAttr(uuid);

    // Done
    return res;
  }
})

우리는 여전히 원소를 사용할 수 있습니다.id만약 그것이 추가하는 대신 하나를 가지고 있다면.attribute.
문의하는 중인지 잘 모르겠습니다.ids가 더 빠르든 아니든.저는 이것을 참조했지만, 외관상으로 볼 때 현대 브라우저에서 큰 인기를 끌지 못했습니다.여전히 사용하여 구현할 수 있습니다.id만약 그것이 대신 존재한다면.attribute.

기본 js match() 함수 사용:

if( element.attr('class') !== undefined && element.attr('class').match(/class1|class2|class3|class4|class5/) ) {
  console.log("match");
}

regexp에서 변수를 사용하려면 다음을 사용합니다.

var reg = new RegExp(variable, 'g');
$(this).match(reg);

그나저나, 이것이 가장 빠른 방법입니다: http://jsperf.com/hasclass-vs-is-stackoverflow/22

다음과 같은 방법을 사용할 수 있습니다.

if($(selector).filter('.class1, .class2').length){
    // Or logic
}

if($(selector).filter('.class1.class2').length){
    // And logic
}

요소가 고유하게 식별될 수 있는 경우(예: ID) 다음과 같은 항목을 선택할 수 있습니다.

if($("#id.class, #id.class2").length)

요소가 형제자매 간에 고유하게 식별될 수 있는 경우(예: 형제자매 중 유일한 DIV 요소) 다음과 같은 항목을 확인할 수 있습니다.

if(element.parent().find(">div.class, >div.class2").length)

이것은 저에게 효과가 있었습니다.

$('.class1[class~="class2"]').append('something');

내게 맞는 제품:

 if ( $("element").hasClass( "class1") || $("element").hasClass("class2") ) {

 //do something here

 }

언급URL : https://stackoverflow.com/questions/2214952/jquery-hasclass-check-for-more-than-one-class