javascript - परीक्षण करें यदि किसी तत्व में कक्षा है?




html css (13)

सादे जावास्क्रिप्ट (jQuery नहीं) का उपयोग करना, क्या कोई तरीका है कि मैं यह देखने के लिए जांच कर सकता हूं कि किसी तत्व में कक्षा है या नहीं?

वर्तमान में, मैं यह कर रहा हूँ:

HTML:

<div id="test" class="class1"></div>;

जे एस:

var test = document.getElementById("test");
var testClass = test.className;
switch(testClass){
    case "class1": test.innerHTML = "I have class1"; break;
    case "class2": test.innerHTML = "I have class2"; break;
    case "class3": test.innerHTML = "I have class3"; break;
    case "class4": test.innerHTML = "I have class4"; break;
    default: test.innerHTML = "";
}

इसका परिणाम इस आउटपुट में होता है, जो सही है:

I have class1

मुद्दा यह है कि अगर मैं इसे HTML में बदलता हूं ...

<div id="test" class="class1 class5"></div>

... अब कोई सटीक मिलान नहीं है, इसलिए मुझे कुछ भी नहीं ( "" ) का डिफ़ॉल्ट आउटपुट मिलता है। लेकिन मैं अभी भी आउटपुट चाहता I have class1 कक्षा 1 है क्योंकि <div> अभी भी .class1 वर्ग है।


  1. क्लासनाम को फ़्लैंक करने के लिए रिक्त स्थान जोड़ने की फ़ेलिक्स की चाल और जिस स्ट्रिंग को आप खोज रहे हैं वह यह निर्धारित करने का सही दृष्टिकोण है कि तत्वों का वर्ग है या नहीं।

  2. कक्षा के अनुसार अलग-अलग व्यवहार करने के लिए, आप मानचित्र के भीतर फ़ंक्शन संदर्भ या फ़ंक्शंस का उपयोग कर सकते हैं:

    function fn1(element){ /* code for element with class1 */ }
    
    function fn2(element){ /* code for element with class2 */ }
    
    function fn2(element){ /* code for element with class3 */ }
    
    var fns={'class1': fn1, 'class2': fn2, 'class3': fn3};
    
    for(var i in fns) {
        if(hasClass(test, i)) {
            fns[i](test);
        }
    }
    
    • के लिए (var i fns में) fns मानचित्र के भीतर कुंजी के माध्यम से पुनरावृत्त करता है।
    • एफएनएसआई के बाद कोई ब्रेक नहीं होने पर कोड होने पर कोड को निष्पादित करने की अनुमति मिलती है - ताकि अगर तत्व, फाई, कक्षा 1 और कक्षा 2 हो, तो एफएन 1 और एफएन 2 दोनों निष्पादित किए जाएंगे।
    • इस दृष्टिकोण का लाभ यह है कि प्रत्येक वर्ग के लिए निष्पादित कोड मनमाने ढंग से होता है, जैसे कि स्विच स्टेटमेंट में से एक; आपके उदाहरण में सभी मामलों ने एक समान ऑपरेशन किया, लेकिन कल आपको प्रत्येक के लिए अलग-अलग चीजें करने की आवश्यकता हो सकती है।
    • आप एक स्टेटस वैरिएबल करके डिफॉल्ट केस अनुकरण कर सकते हैं कि लूप में कोई मिलान मिला या नहीं।

आधुनिक ब्राउज़रों में, आप केवल Element.classList विधि contains कर सकते हैं:

testElement.classList.contains(className)

डेमो

var testElement = document.getElementById('test');

console.log({
    'main' : testElement.classList.contains('main'),
    'cont' : testElement.classList.contains('cont'),
    'content' : testElement.classList.contains('content'),
    'main-cont' : testElement.classList.contains('main-cont'),
    'main-content' : testElement.classList.contains('main-content')
});
<div id="test" class="main main-content content"></div>

समर्थित ब्राउज़र

( caniuse.com/#feat=classlist )

polyfill

यदि आप Element.classList का उपयोग करना चाहते हैं लेकिन आप पुराने ब्राउज़रों का भी समर्थन करना चाहते हैं, तो एली ग्रे द्वारा इस Element.classList का उपयोग करने पर विचार करें


इसको आजमाओ:

document.getElementsByClassName = function(cl) {
   var retnode = [];
   var myclass = new RegExp('\\b'+cl+'\\b');
   var elem = this.getElementsByTagName('*');
   for (var i = 0; i < elem.length; i++) {
       var classes = elem[i].className;
       if (myclass.test(classes)) retnode.push(elem[i]);
   }
    return retnode;
};

एक सरलीकृत oneliner: 1

function hasClassName(classname,id) {
 return  String ( ( document.getElementById(id)||{} ) .className )
         .split(/\s/)
         .indexOf(classname) >= 0;
}

1 indexOf लिए सरणी आईई (संभोग) द्वारा समर्थित नहीं है। उसके लिए जाल पर बहुत सारे बंदर पैच पाए जाते हैं।


मुझे बहुत सारे उत्तर पता हैं लेकिन इनमें से अधिकतर अतिरिक्त कार्यों और अतिरिक्त कक्षाओं के लिए हैं। यह वह है जिसे मैं व्यक्तिगत रूप से उपयोग करता हूं; कोड की बहुत साफ और बहुत कम लाइनें!

if( document.body.className.match('category-page') ) { 
  console.log('yes');
}

मुझे लगता है कि यह सही समाधान होगा

if ($(this).hasClass("your_Class")) 
    alert("positive");            
else              
    alert("Negative");

मैंने एक प्रोटोटाइप विधि बनाई है जो classList का उपयोग करता है, यदि संभव हो, तो classList लिए रिसॉर्ट्स:

Element.prototype.hasClass = Element.prototype.hasClass || 
  function(classArr){
    var hasClass = 0,
        className = this.getAttribute('class');
  
    if( this == null || !classArr || !className ) return false;
  
    if( !(classArr instanceof Array) )
      classArr = classArr.split(' ');

    for( var i in classArr )
      // this.classList.contains(classArr[i]) // for modern browsers
      if( className.split(classArr[i]).length > 1 )  
          hasClass++;

    return hasClass == classArr.length;
};


///////////////////////////////
// TESTS (see browser's console when inspecting the output)

var elm1 = document.querySelector('p');
var elm2 = document.querySelector('b');
var elm3 = elm1.firstChild; // textNode
var elm4 = document.querySelector('text'); // SVG text

console.log( elm1, ' has class "a": ', elm1.hasClass('a') );
console.log( elm1, ' has class "b": ', elm1.hasClass('b') );
console.log( elm1, ' has class "c": ', elm1.hasClass('c') );
console.log( elm1, ' has class "d": ', elm1.hasClass('d') );
console.log( elm1, ' has class "a c": ', elm1.hasClass('a c') );
console.log( elm1, ' has class "a d": ', elm1.hasClass('a d') );
console.log( elm1, ' has class "": ', elm1.hasClass('') );

console.log( elm2, ' has class "a": ', elm2.hasClass('a') );

// console.log( elm3, ' has class "a": ', elm3.hasClass('a') );

console.log( elm4, ' has class "a": ', elm4.hasClass('a') );
<p class='a b c'>This is a <b>test</b> string</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
    <text x="10" y="20" class='a'>SVG Text Example</text>
</svg>

टेस्ट पेज


यदि तत्व में केवल एक वर्ग का नाम है तो आप कक्षा विशेषता प्राप्त करके इसे तुरंत देख सकते हैं। अन्य उत्तरों बहुत अधिक मजबूत हैं लेकिन यह निश्चित रूप से इसका उपयोग मामलों है।

if ( element.getAttribute('class') === 'classname' ) {

}

यह थोड़ा पुराना है, लेकिन शायद कोई मेरा समाधान सहायक पाएगा:

// Fix IE's indexOf Array
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (searchElement) {
        if (this == null) throw new TypeError();
        var t = Object(this);
        var len = t.length >>> 0;
        if (len === 0) return -1;
        var n = 0;
        if (arguments.length > 0) {
            n = Number(arguments[1]);
            if (n != n) n = 0;
            else if (n != 0 && n != Infinity && n != -Infinity) n = (n > 0 || -1) * Math.floor(Math.abs(n));
        }
        if (n >= len) return -1;
        var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
        for (; k < len; k++) if (k in t && t[k] === searchElement) return k;
        return -1;
    }
}
// add hasClass support
if (!Element.prototype.hasClass) {
    Element.prototype.hasClass = function (classname) {
        if (this == null) throw new TypeError();
        return this.className.split(' ').indexOf(classname) === -1 ? false : true;
    }
}

यह थोड़ा सा है, लेकिन अगर आपके पास एक ईवेंट है जो स्विच ट्रिगर करता है, तो आप कक्षाओं के बिना कर सकते हैं:

<div id="classOne1"></div>
<div id="classOne2"></div>
<div id="classTwo3"></div>

तुम कर सकते हो

$('body').click( function() {

    switch ( this.id.replace(/[0-9]/g, '') ) {
        case 'classOne': this.innerHTML = "I have classOne"; break;
        case 'classTwo': this.innerHTML = "I have classTwo"; break;
        default: this.innerHTML = "";
    }

});

.replace(/[0-9]/g, '') id से अंकों को हटा देता है।

यह थोड़ा हैकी है, लेकिन बिना अतिरिक्त कार्यों या लूप के लंबे स्विच के लिए काम करता है


यहां एक छोटा सा स्निपेट है यदि आप गीले तत्व की जांच करने की कोशिश कर रहे हैं तो jQuery का उपयोग किए बिना कक्षा में एक वर्ग है।

function hasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

यह इस तथ्य के लिए जिम्मेदार है कि तत्व में अंतरिक्ष द्वारा अलग-अलग वर्ग नाम शामिल हो सकते हैं।

या

आप इस फ़ंक्शन को तत्व प्रोटोटाइप पर भी असाइन कर सकते हैं।

Element.prototype.hasClass = function(className) {
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

और इसे इस तरह ट्रिगर करें (jQuery के .hasClass() फ़ंक्शन के समान ही):

document.getElementById('MyDiv').hasClass('active');

वर्तमान में कौन सा तत्व कक्षा '.bar' है? यहां एक और समाधान है लेकिन यह आपके ऊपर है।

var reg = /Image/g, // regexp for an image element
query = document.querySelector('.bar'); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string

if (query.match(reg)) { // checks if it matches
  alert('the class .bar is attached to the following Element:\n' + query);
}

jsfiddle डेमो

बेशक यह केवल 1 साधारण तत्व <img> ( /Image/g ) के लिए एक लुकअप है, लेकिन आप सभी को एक सरणी में डाल सकते हैं जैसे <li> is /LI/g , <ul> = /UL/g आदि


className केवल एक स्ट्रिंग है ताकि आप नियमित className का उपयोग कर देख सकें कि कक्षाओं की सूची में एक और स्ट्रिंग है या नहीं।





dom