निर्धारित करें कि किसी तत्व में jQuery के साथ CSS क्लास है


173

मैं jQuery के साथ काम कर रहा हूं और यह देखना चाहता हूं कि क्या यह निर्धारित करने का एक आसान तरीका है कि तत्व में एक विशिष्ट सीएसएस वर्ग जुड़ा हुआ है या नहीं।

मेरे पास तत्व की आईडी है, और सीएसएस वर्ग जिसे मैं ढूंढ रहा हूं। मुझे बस सक्षम होने की जरूरत है, यदि एक बयान में, तत्व पर उस वर्ग के अस्तित्व के आधार पर तुलना करें।


1
यदि आप इसे jQuery के बिना करना चाहते हैं, तो जावास्क्रिप्ट के साथ "hasClass" है?
ओरिऑल

जवाबों:


237

hasClassविधि का प्रयोग करें :

jQueryCollection.hasClass(className);

या

$(selector).hasClass(className);

तर्क (स्पष्ट रूप से) एक स्ट्रिंग है जिसे आप जाँच रहे हैं, और यह एक बूलियन देता है (इसलिए यह अधिकांश jQuery के तरीकों की तरह चेनिंग का समर्थन नहीं करता है)।

नोट: यदि आप एक classNameतर्क पास करते हैं जिसमें व्हाट्सएप शामिल है, तो यह संग्रह के तत्वों के classNameस्ट्रिंग के खिलाफ शाब्दिक रूप से मेल खाएगा । इसलिए, उदाहरण के लिए, आपके पास एक तत्व है,

<span class="foo bar" />

तो यह वापस आ जाएगी true:

$('span').hasClass('foo bar')

और ये वापस आ जाएंगे false:

$('span').hasClass('bar foo')
$('span').hasClass('foo  bar')

4
मैं असहमत हूं। दस्तावेज़ीकरण श्रेणियों के तहत आयोजित किया गया है, लेकिन आप आसानी से वर्णानुक्रम में सभी तरीकों को देख सकते हैं। सब कुछ एक उदाहरण के साथ आता है, और टिप्पणी अनुभाग आमतौर पर कुछ भी साफ करता है जो कि बचा हुआ है। jQuery के पास उत्कृष्ट कार्यों और उपयोगिताओं का एक बहुत है और यह उन सभी को खोजने के लिए कुछ सीख लेता है। -EDIT- यह समझ में आता है, यह निश्चित रूप से एक लंबा सफर तय करता है।
ट्राफलमाडोरियन

1
@ Trafalmadorian, मैंने अपनी मूल टिप्पणी हटा दी है क्योंकि स्थिति बदल गई है। मूल रूप से आपने -EDIT- से पहले सब कुछ पोस्ट किया था, और मैंने उत्तर दिया कि प्रलेखन गुणवत्ता के बारे में मेरी टिप्पणी अब प्रासंगिक नहीं थी, लेकिन उनकी पिछली (मीडियाविकि) प्रणाली के लिए संदर्भित थी। आपने फिर अपनी पिछली टिप्पणी हटा दी और -EDIT- के साथ पुन: लगा दिया। मुझे आशा है कि यह सफाई भविष्य के पाठकों के लिए थोड़ी स्पष्ट और कम भ्रामक है।
आंखों की रोशनी

@daniloquio, यह है अगर आप सीधे api.jquery.com पर जाते हैं ... किसी कारण से वेबसाइट अभी भी docs.jquery.com पर भयानक विकी संस्करण से लिंक करती है
20-02 पर eyelidlessness

21

से पूछे जाने वाले प्रश्न

elem = $("#elemid");
if (elem.is (".class")) {
   // whatever
}

या:

elem = $("#elemid");
if (elem.hasClass ("class")) {
   // whatever
}

3
.is के साथ सावधान () - "jQuery में विधि () विधि सही होगी यदि वर्तमान संग्रह के तत्वों में से कोई भी तत्व आइस
zack

11

नकार के लिए, यदि आप जानना चाहते हैं कि क्या कोई तत्व वर्ग नहीं है, तो आप बस मार्क के अनुसार कर सकते हैं।

if (!currentPage.parent().hasClass('home')) { do what you want }

3

बिना jQuery के:

var hasclass=!!(' '+elem.className+' ').indexOf(' check_class ')+1;

या:

function hasClass(e,c){
    return e&&(e instanceof HTMLElement)&&!!((' '+e.className+' ').indexOf(' '+c+' ')+1);
}
/*example of usage*/
var has_class_medium=hasClass(document.getElementsByTagName('input')[0],'medium');

यह jQuery की तुलना में तेज है!


तुम क्यों करते हो ...&&!!((' '+e.classname+' ').indexOf(' '+c+' ')+1), और बस नहीं &&!(' '+e.classname+' ').indexOf(' '+c+' ')?
Blexy

1
क्योंकि indexOfरिटर्न -1वह वर्ग है जिसका अस्तित्व नहीं है। अगर मैं करता !!-1, तो यह होता true। चूंकि मैं कर रहा हूं !!-1+1, यह झूठा होगा। एक बेहतर तरीका होगा ...&&!!~(' '+e.className+' ').indexOf(' '+c+' '), लेकिन मुझे उस समय यह याद नहीं था।
इस्माइल मिगुएल

क्षमा करें, मेरा मतलब था...&&~(' '+e.className+' ').indexOf(' '+c+' ')
इस्माइल मिगुएल

3

किसी की मदद करने के हितों में जो यहाँ भूमि पर वास्तव में ऐसा करने के लिए एक jQuery मुक्त तरीके की तलाश में था:

element.classList.contains('your-class-name')



0

मेरे मामले में, मैंने 'का उपयोग किया है' एक jQuery फ़ंक्शन, मेरे पास एक HTML तत्व था जिसमें विभिन्न सीएसएस कक्षाएं जोड़ी गईं, मैं इन के बीच में एक विशिष्ट वर्ग की तलाश कर रहा था, इसलिए मैंने "इस" का उपयोग किया है एक अच्छा विकल्प जांच एक वर्ग को गतिशील रूप से एक html तत्व में जोड़ा गया है, जिसमें पहले से ही अन्य सीएसएस कक्षाएं हैं, यह एक और अच्छा विकल्प है।

सरल उदाहरण:

 <!--element html-->
 <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

 <!--jQuery "is"-->
 $('#menu').is('.cbp-spmenu-open');

उन्नत उदाहरण:

 <!--element html-->
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

   <!--jQuery "is"-->
    if($('#menu').is('.cbp-spmenu-bottom.cbp-spmenu-open')){
       $("#menu").show();
    }
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.