jQuery hasClass () - एक से अधिक वर्ग के लिए जाँच करें

Question

साथ में:

if(element.hasClass("class"))

मैं एक वर्ग की जांच कर सकता हूं, लेकिन क्या यह जांचने का एक आसान तरीका है कि "तत्व" में कई वर्ग हैं?

मै इस्तेमाल कर रहा हूँ:

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

जो बहुत बुरा नहीं है, लेकिन मैं कुछ ऐसा सोच रहा हूं:

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

जो दुर्भाग्य से काम नहीं करता है।

क्या ऐसा कुछ है?

Answer 1

कैसा रहेगा:

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

Comments

नहीं, क्योंकि यह उन तत्वों की तलाश करेगा जिनके पास दोनों वर्ग हैं। मुझे लगता है कि मार्सेल एक या अधिक कक्षाओं के तत्वों की तलाश में है।

— गाइल्स वान ग्रुइसेन

अभी अभी देखा कि मेरे पास 4 आईडी = "हैलो" तत्व हैं। वैरिडेटर्स को

— Matchu

@ माचू मैं एक ही मुद्दे के साथ कर रहा था, .hasClass()लेकिन अपने समाधान के लिए किया है लगता है चाल, धन्यवाद

— नासिर

यह मेरे लिए काम नहीं किया, लेकिन $('element').is('.class1.class2')किया

— iamchriswick

@iamchriswick: ओपी जो पूछ रहा था, उससे थोड़ा अलग है। .class1.class2उन तत्वों से मेल खाएगा जिनमें दोनों वर्ग हैं, लेकिन वे ऐसे तत्वों की तलाश में थे जो या तो वर्ग से मेल खाते हों ।

— माचू

Answer 2

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

काम करता है, लेकिन यह 35% की तुलना में धीमा है

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

यदि आपको संदेह है कि मैं क्या कहता हूं, तो आप jsperf.com पर सत्यापित कर सकते हैं ।

आशा है कि यह किसी की मदद करेंगे।

Comments

19% धीमी, बड़ी बात प्रोग्रामर अधिक महंगे हैं।

— नोवेर

@DamianNowak अगर वे प्रोग्रामर यह लिखने के लिए तैयार नहीं हैं कि अधिक मात्रा में कितनी मात्रा में वे शायद बहुत महंगे नहीं हैं।

— अकुमा

... उम, लेकिन मैंने इसे अभी क्रोम 21.0.1180 के लिए jsperf में चलाया है और यह () विधि अब लगभग 20% तेज है। लेकिन hasClass () अधिक पठनीय लगता है।

— डेनियल आयटेकिन

@psychobrm: यदि आपको एक ही बार में 10 कक्षाओं की जाँच करनी है, तो आपको अपने कक्षा के नामों को सुव्यवस्थित करने की आवश्यकता है। इस तरह की बकवास का कोई कारण नहीं है। :)

— cHao

व्यक्तिगत रूप से खिचड़ी भाषा प्रदर्शन के अनुकूलन की आवश्यकता को देखती है। 12000 ऑपरेशन प्रति सेकंड मुझे काफी तेज लगता है। मैं कहूँगा कि जो भी आपको अच्छा लगे, का उपयोग करें। आवश्यकता पड़ने पर प्रदर्शन का अनुकूलन करें।

— डीएम

Answer 3

$.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']);

यह यह करना चाहिए, सरल और आसान।

Comments

आप (चयनकर्ताओं में i) के लिए एक संस्करण याद कर रहे हैं, इस प्रकार एक वैश्विक बना रहे हैं।

— ग्रीमवेल

एक मामूली बात है, लेकिन पैरामीटर चयनकर्ताओं को वास्तव में कक्षाओं या क्लासनेम का नाम दिया जाना चाहिए , क्योंकि आप जो चयन कर रहे हैं, चयनकर्ता नहीं हैं। चयनकर्ताओं के सामने $ ('# तत्व') के रूप में एक बिंदी होगी। hasClasses (['वर्ग 1', '.class2', '.class3']);

— jbyrd

Answer 4

फ़िल्टर () एक और विकल्प है

मिलान तत्वों के सेट को कम करें जो चयनकर्ता से मेल खाते हैं या फ़ंक्शन के परीक्षण को पास करते हैं।

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

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

Answer 5

इस बारे में कैसा है?

if (element.hasClass("class1 class2")

Comments

यदि आप किसी OR स्थिति को देख रहे हैं तो यह काम नहीं करता है।

— जेसन कॉनविल

Answer 6

यहाँ एक जवाब है जो वाक्य रचना का पालन करता है

$(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

Comments

Error: $self is not defined

— बैगोफिल्क

@bagofmilk मेरा उत्तर दूसरों द्वारा संपादित किया गया है क्योंकि मैंने इसे 6 साल पहले लिखा था। चूँकि मैंने वर्षों में jQuery का उपयोग नहीं किया है, मुझे ठीक-ठीक पता नहीं है कि एडिट का इरादा क्या था, लेकिन मूल रूप से मैं var $self = $(this);फॉर-लूप से ठीक पहले था

— हेनरिक माइएंटी

Answer 7

इस बारे में क्या,

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

Answer 8

व्हाट अबाउट:

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

Comments

आप की जरूरत नहीं है > 0। यदि लंबाई गैर-शून्य है तो यह सही वापस आ जाएगी।

— आइजैक लुबो

Answer 9

jQuery

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

वेनिला जेएस

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

Answer 10

डिफ़ॉल्ट जेएस मैच () फ़ंक्शन का उपयोग करें:

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

Comments

इस उत्तर की तरह सबसे अच्छा, हालांकि मुझे संदेह है कि कक्षाओं के माध्यम से लूपिंग और एक स्ट्रिंग इंडेक्सऑफ टेस्ट का उपयोग करना अभी भी तेज हो सकता है ...

— टेररिंग

Answer 11

मेरे लिये कार्य करता है:

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

 //do something here

 }

Answer 12

आप इस तरह से कर सकते हैं:

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

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

Answer 13

यह मेरे लिए काम किया:

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

Comments

इस जवाब का पूछे गए सवाल से कोई लेना-देना नहीं है।

— जेजेन थॉमस

यह वास्तव में एक महान जवाब है। उपरोक्त चयनकर्ता सिंटैक्स क्लास 1 और क्लास 2 दोनों के साथ सभी तत्वों को पकड़ लेता है। फिर आप वह कर सकते हैं जो आपको पसंद है, इस मामले में। अन्य तरीकों की तुलना में प्रदर्शन की जाँच नहीं की गई, लेकिन वाक्यविन्यास अच्छा और संक्षिप्त है।

— टिम राइट

@TimWright यह एक भयानक जवाब है। 2 वर्गों के साथ एक तत्व का चयन करने का सामान्य तरीका $('.class1.class2')दूसरी कक्षा के लिए विशेषता चयनकर्ता का उपयोग करने की आवश्यकता नहीं है। साथ ही, सवाल यह है कि सभी वर्गों में से किसी एक के द्वारा किसी तत्व का चयन कैसे किया जाए।

— सभी कार्यकर्ता