आप jQuery के hasClassसादे ओल 'जावास्क्रिप्ट के साथ कैसे करते हैं ? उदाहरण के लिए,
<body class="foo thatClass bar">अगर <body>यह पूछने के लिए जावास्क्रिप्ट तरीका क्या है thatClass?
जवाबों:
आप देख सकते हैं कि क्या element.classNameमैच /\bthatClass\b/।
\bएक शब्द विराम से मेल खाता है।
या, आप jQuery के अपने कार्यान्वयन का उपयोग कर सकते हैं:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 )
अपने अधिक सामान्य प्रश्न का उत्तर देने के लिए, आप विशेष रूप से इस स्रोत दर्शक में जीथ्यू या स्रोत पर jQuery के स्रोत कोड को देख सकते हैं ।hasClass
rclassवास्तव में क्या है? ))
\b"ThatClass-anotherClass" से मेल नहीं खाएगा?
/[\t\r\n\f]/g। यह भी उल्लेख करना अच्छा है कि माइनस साइन के /\bclass\b/साथ क्लासनाम के लिए असफल हो सकता है -( इसके अलावा यह अच्छा काम करता है), यही कारण है कि jQuery का कार्यान्वयन बेहतर और अधिक विश्वसनीय है। उदाहरण के लिए: /\bbig\b/.test('big-text')प्रत्याशित असत्य के बजाय सही लौटाता है।
बस उपयोग करें classList.contains():
if (document.body.classList.contains('thatClass')) {
// do some stuff
}
अन्य उपयोग classList:
document.body.classList.add('thisClass');
// $('body').addClass('thisClass');
document.body.classList.remove('thatClass');
// $('body').removeClass('thatClass');
document.body.classList.toggle('anotherClass');
// $('body').toggleClass('anotherClass');
ब्राउज़र समर्थन:
.classListएक स्ट्रिंग के रूप में पुनः प्राप्त कर सकता है , लेकिन यह अधिक आधुनिक तरीकों को मान्यता नहीं देगा जैसे कि.classList.contains()
सबसे प्रभावी एक लाइनर है कि
thisClassउस तत्व की खोज करते समय एक झूठी सकारात्मक वापस नहीं करता है class="thisClass-suffix"।function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}वह गुण जो उपयोग में आने वाली कक्षाओं को संग्रहीत करता है className।
तो आप कह सकते हैं:
if (document.body.className.match(/\bmyclass\b/)) {
....
}यदि आप ऐसा स्थान चाहते हैं जो आपको दिखाए कि jQuery सब कुछ कैसे करता है, तो मैं सुझाव दूंगा:
matchविशेषता फिर से काम आता है! क्या वास्तव में jQuery जावास्क्रिप्ट में संभव से अधिक कुछ करता है ?! यदि नहीं, तो jQuery शॉर्टहैंड का एक अनावश्यक वजन है।
myclass-something, जैसा कि \bमैच हाइफ़न।
// 1. Use if for see that classes:
if (document.querySelector(".section-name").classList.contains("section-filter")) {
alert("Grid section");
// code...
}<!--2. Add a class in the .html:-->
<div class="section-name section-filter">...</div>hasClass फ़ंक्शन:
HTMLElement.prototype.hasClass = function(cls) {
var i;
var classes = this.className.split(" ");
for(i = 0; i < classes.length; i++) {
if(classes[i] == cls) {
return true;
}
}
return false;
};AddClass फ़ंक्शन:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};निष्कासन कार्य:
HTMLElement.prototype.removeClass = function(remove) {
var newClassName = "";
var i;
var classes = this.className.replace(/\s{2,}/g, ' ').split(" ");
for(i = 0; i < classes.length; i++) {
if(classes[i] !== remove) {
newClassName += classes[i] + " ";
}
}
this.className = newClassName.trim();
};मैं एक सरल / न्यूनतम समाधान, एक लाइन, क्रॉस ब्राउज़र का उपयोग करता हूं, और विरासत ब्राउज़र के साथ भी काम करता हूं:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'यह विधि बहुत बढ़िया है क्योंकि इसमें पॉलीफिल की आवश्यकता नहीं होती है और यदि आप classListप्रदर्शन के मामले में इसका उपयोग करते हैं तो यह बेहतर है। कम से कम मेरे लिए।
अद्यतन: मैंने एक छोटा सा पॉलीफ़िल बनाया जो मेरे द्वारा उपयोग किए जाने वाले एक सर्वांगीण समाधान है:
function hasClass(element,testClass){
if ('classList' in element) { return element.classList.contains(testClass);
} else { return new Regexp(testClass).exec(element.className); } // this is better
//} else { return el.className.indexOf(testClass) != -1; } // this is faster but requires indexOf() polyfill
return false;
}अन्य वर्ग हेरफेर के लिए, यहां पूरी फ़ाइल देखें ।
notmyClassHere?
!/myClass/.test(document.body.className)नोटिस !प्रतीक।
thisIsmyClassHere।
इसके लिए एक अच्छा उपाय है क्लासिस्ट के साथ काम करना और उसमें शामिल होना।
मैंने इसे इस तरह किया:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...तो आपको अपने तत्व की आवश्यकता है और कक्षाओं की सूची की जांच करें। यदि कोई एक वर्ग समान है, तो आप जिसको खोजते हैं, वह सही लौटेगा या नहीं, यदि वह गलत नहीं लौटेगा!
कुछ का उपयोग करें:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');myHTMLSelector.classList.indexOf('the-class')? क्या आप भी >=0अंत में नहीं चाहते हैं ?
[].indexOfयदि classListकोई containsविधि है तो उपयोग करने की क्या बात है ?
myHTMLSelector.classList.indexOf('the-class')त्रुटि देता है myHTMLSelector.classList.indexOf is not a functionक्योंकि myHTMLSelector.classListकोई सरणी नहीं है। लेकिन मुझे लगता है कि जब Array.prototypeकुछ रूपांतरण का उपयोग करके इसे कॉल किया जाता है। यह पुराने ब्राउज़र का समर्थन कर सकता है, हालाँकि containsइसमें बहुत अच्छा समर्थन है।
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}IE8 +, फ़ायरफ़ॉक्स और क्रोम में यह 'hasClass' फ़ंक्शन काम करता है:
hasClass = function(el, cls) {
var regexp = new RegExp('(\\s|^)' + cls + '(\\s|$)'),
target = (typeof el.className === 'undefined') ? window.event.srcElement : el;
return target.className.match(regexp);
}अच्छी तरह से उपरोक्त सभी उत्तर बहुत अच्छे हैं, लेकिन यहां एक छोटा सा सरल कार्य है जिसे मैंने कोड़ा। यह बहुत अच्छी तरह से काम करता है।
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}classListएक containsविधि है, तो इसका क्या मतलब है ?
आप इस दृष्टिकोण के बारे में क्या सोचते हैं?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );class="nothatClassIsnt"?
यहाँ सबसे आसान तरीका है:
var allElements = document.querySelectorAll('*');
for (var i = 0; i < allElements.length; i++) {
if (allElements[i].hasAttribute("class")) {
//console.log(allElements[i].className);
if (allElements[i].className.includes("_the _class ")) {
console.log("I see the class");
}
}
}
classसंपत्ति को पार्स करना होगा (जो कि कई वर्गों के मामले में एक स्थान से अलग यादृच्छिक क्रम में कई वर्ग नाम होंगे) और जांचें कि क्या आपके वर्ग का नाम इसमें है। बहुत मुश्किल नहीं है, लेकिन अभी भी बहुत असुविधाजनक है अगर सीखने के उद्देश्यों के लिए नहीं :)