জাভাস্ক্রিপ্টে কোনও উপাদানটির কোনও শ্রেণি রয়েছে কিনা তা পরীক্ষা করুন?

585

সরল জাভাস্ক্রিপ্ট (jQuery নয়) ব্যবহার করে, কোনও উপাদানটিতে একটি শ্রেণি রয়েছে কিনা তা পরীক্ষা করার কোনও উপায় আছে কি ?

বর্তমানে, আমি এটি করছি:

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 = "";
}

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

স্নিপেট প্রসারিত করুন

সমস্যাটি হ'ল আমি যদি এইচটিএমএল পরিবর্তন করি তবে ...

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

... এখন আর কোনও সঠিক মিল নেই, তাই আমি কোনও কিছুর ডিফল্ট আউটপুট পাই না ""। কিন্তু আমি এখনও আউটপুট হতে চান I have class1কারণ <div>এখনও রয়েছে.class1 বর্গ।

— daGUY
সূত্র

5

এলিমেন্ট.classList.contains (cls)

— রনি রয়স্টন

1034

পদ্ধতি ব্যবহার করুন :element.classList .contains

element.classList.contains(class);

এটি সমস্ত বর্তমান ব্রাউজারগুলিতে কাজ করে এবং পুরানো ব্রাউজারগুলিকে সমর্থন করার জন্য পলিফিল রয়েছে।

বিকল্পভাবে , আপনি যদি পুরানো ব্রাউজারগুলির সাথে কাজ করেন এবং পলিফিলগুলি সেগুলি ঠিক করার জন্য ব্যবহার করতে না চান indexOfতবে এটি সঠিক, তবে আপনাকে এটি কিছুটা টুইট করতে হবে:

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

অন্যথায় আপনি trueযে শ্রেণীর সন্ধান করছেন সেটি অন্য শ্রেণীর নামের অংশ হলে আপনিও পাবেন।

ডেমো

jQuery একটি অনুরূপ (একই না থাকলে) পদ্ধতি ব্যবহার করে।

উদাহরণ প্রয়োগ করা:

যেহেতু এটি স্যুইচ স্টেটমেন্টের সাথে একসাথে কাজ করে না, আপনি এই কোডের সাথে একই প্রভাব অর্জন করতে পারেন:

var test = document.getElementById("test"),
    classes = ['class1', 'class2', 'class3', 'class4'];

test.innerHTML = "";

for(var i = 0, j = classes.length; i < j; i++) {
    if(hasClass(test, classes[i])) {
        test.innerHTML = "I have " + classes[i];
        break;
    }
}

এটিও কম অপ্রয়োজনীয়;)

— ফেলিক্স ক্লিং
সূত্র

দুর্দান্ত, তবে আমি কীভাবে স্যুইচ স্টেটমেন্টের সাথে এটি ব্যবহার করব যাতে ডিভের মধ্যে রয়েছে কোন শ্রেণীর উপর ভিত্তি করে আউটপুট পরিবর্তন করতে পারি?

— daGUY

@ ডাগুয়াই: যাইহোক আপনি সুইচ স্টেটমেন্টটি দিয়ে কী করতে চান? উদাহরণস্বরূপ, দ্বিতীয়টির divদুটি শ্রেণি রয়েছে তবে এটি I have class1আপনি যেমন ব্যবহার করছেন ঠিক তত আউটপুট break। আপনি যদি প্রতিটি শ্রেণীর একটি উপাদানকে আউটপুট দিতে চান তবে আপনি কেবল এটি নিতে classNameএবং এটি সাদা স্পেসে বিভক্ত করতে পারেন । বা আপনার আসল লক্ষ্য কি?

— ফেলিক্স ক্লিং

@ ফেলিক্স ক্লিংং: কোন শ্রেণীর অন্তর্ভুক্ত তার উপর নির্ভর করে চারটি পৃথক স্ট্রিংয়ের মধ্যে পরিবর্তন করার জন্য আমার ডিভের অভ্যন্তরীণ এইচটিএমএল প্রয়োজন। আমি উদাহরণ হিসাবে "আমার ক্লাস 1" ইত্যাদি ব্যবহার করেছি - আসল স্ট্রিংগুলি সমস্ত আলাদা all আমি কেবল একবারে একটি স্ট্রিং দেখাবো, কোনও সংশ্লেষ না করে (প্রতিটি মামলার পরে বিরতি)। আমি কেবল এটি এখনও কাজ করতে চাই এমনকি ডিভের একাধিক ক্লাসগুলির মধ্যে ম্যাচিং ক্লাস।

— daGUY

@ ফেলিক্স ক্লিংং: এটি তা করেছেন, অনেক অনেক ধন্যবাদ! আমি আসলে ক্লাসের নামগুলি আউটপুট করছি না, বরং চারটি সম্পূর্ণ ভিন্ন স্ট্রিংগুলির মধ্যে একটি, তাই আমি একে একে সামান্য কয়েকটি আইএফ / ইএলএসই আইএফ স্টেটমেন্টের সাথে সামঞ্জস্য করেছি প্রতিটি একটিকে পরিচালনা করার জন্য। যদিও পুরোপুরি কাজ করে।

— daGUY

1

আপনি আগে এবং পরে স্পেস যুক্ত করার কোনও নির্দিষ্ট কারণ আছে?

— সিড

93

সহজ এবং কার্যকর সমাধানটি চেষ্টা করছে c পদ্ধতি অন্তর্ভুক্ত।

test.classList.contains(testClass);

— ডেভেলপার
সূত্র

3

containsএকটি পদ্ধতি element.classListসম্পত্তি

— user907860

7

বিশেষ দ্রষ্টব্য! সমস্ত ব্রাউজারগুলিতে সমর্থিত নয়, আরও তথ্যের জন্য এখানে: caniuse.com/#feat=classlist

— সিলভার রিঙ্গভি

4

এটি একটি দুর্দান্ত উত্তর এবং আমি বিশ্বাস করি ont কন্টেন্টগুলি () এর এখন আরও বিস্তৃত সমর্থন রয়েছে।

— নিকোলাস ক্রেইডবার্গ

49

আধুনিক ব্রাউজারগুলিতে, আপনি কেবল এর containsপদ্ধতিটি ব্যবহার করতে পারেন Element.classList:

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 থেকে )

Polyfill

আপনি যদি ব্যবহার করতে চান Element.classListতবে আপনি পুরানো ব্রাউজারগুলিকে সমর্থন করতে চান তবে এলি গ্রে দ্বারা এই পলিফিলটি ব্যবহার করার বিষয়টি বিবেচনা করুন ।

— জন স্লেজার্স
সূত্র

10

যেহেতু তিনি স্যুইচ () ব্যবহার করতে চান, তাই আমি অবাক হয়েছি কেউ এটিকে এখনও প্রকাশ করেনি:

var test = document.getElementById("test");
var testClasses = test.className.split(" ");
test.innerHTML = "";
for(var i=0; i<testClasses.length; i++) {
    switch(testClasses[i]) {
        case "class1": test.innerHTML += "I have class1<br/>"; break;
        case "class2": test.innerHTML += "I have class2<br/>"; break;
        case "class3": test.innerHTML += "I have class3<br/>"; break;
        case "class4": test.innerHTML += "I have class4<br/>"; break;
        default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>";
    }
}

— চিন্তাধারা
সূত্র

1

আমি কেবল একই জিনিসটি ভাবছিলাম, তবে হ্যাঁ, এটিই মূল সমস্যার সবচেয়ে নিকটতম!

— রৌপ্য রিঙ্গভী

8

Element.matches ()

element.matches (selectorString)

এমডিএন ওয়েব ডক্স অনুসারে :

Element.matches()পদ্ধতি আয় trueউপাদান নিদিষ্ট নির্বাচক স্ট্রিং দ্বারা নির্বাচিত করা হবে যদি; অন্যথায়, ফেরত false।

অতএব, আপনি Element.matches()একটি উপাদান একটি বর্গ রয়েছে কিনা তা নির্ধারণ করতে ব্যবহার করতে পারেন ।

const element = document.querySelector('#example');

console.log(element.matches('.foo')); // true

<div id="example" class="foo bar"></div>

স্নিপেট প্রসারিত করুন

ব্রাউজারের সামঞ্জস্যতা দেখুন

— গ্রান্ট মিলার
সূত্র

7

এখানে একটি ছোট স্নিপেট আপনি যদি যাচাইয়ের ব্যবহার না করে ওয়েদার উপাদানগুলির একটি বর্গ রয়েছে তা পরীক্ষা করার চেষ্টা করছেন।

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

এটি উপাদানটিতে স্থান দ্বারা পৃথককৃত একাধিক শ্রেণীর নাম থাকতে পারে fact

অথবা

আপনি উপাদান ফর্মোটাইপ এই ফাংশন বরাদ্দ করতে পারেন।

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

এবং এটিকে ট্রিগার করুন (jQuery এর .hasClass()ফাংশনের সাথে খুব মিল ):

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

— কেভাল ভট্ট
সূত্র

আমি এই সমাধানটি বেশি পছন্দ করি। এটি অন্য শ্রেণীর সাথে আংশিকভাবে মিলে যাওয়া শ্রেণীর নামের বিষয়টি এড়িয়ে চলে এবং আইই তে কাজ করার জন্য পলিফিলের প্রয়োজন হয় না।

— scoota269

5

সরলীকৃত অনেলাইনার: ¹

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

indexOfঅ্যারেগুলির জন্য¹ আইই (অবশ্যই) দ্বারা সমর্থিত নয়। এর জন্য নেটে প্রচুর বানরের প্যাচগুলি পাওয়া যায়।

— KooiInc
সূত্র

1

শব্দ সীমানা নিয়ে সমস্যা হ'ল শ্রেণীর নামের জন্য কিছু বৈধ অক্ষর -যেমন শব্দ সীমা হিসাবে বিবেচিত হয়। যেমন সন্ধান করছে fooএবং শ্রেণি foo-barফলন পেয়েছে true।

— ফেলিক্স ক্লিং

তুমি ঠিক. আসলটি সরানো হয়েছে, আরও একটি পদ্ধতির যোগ হয়েছে। তবুও অনেলিনার।

— KooiInc

5

এটি কিছুটা পুরানো তবে সম্ভবত কেউ আমার সমাধানটি সহায়ক বলে মনে করবে:

// 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;
    }
}

— Dementic
সূত্র

ব্যবহার: 'এলিমেন্ট.হেস ক্লাস (' শ্রেণীর নাম ');

— ডেমেন্টিক

আপনি কেন টি.লেনথ >>> 0 ব্যবহার করেছেন? আমি যতদূর জানি এটি 'নপ' যদি আপনি '0' ব্যবহার করেন, তাই না?

— ভ্যান্ট ক্যানোভা

সহজ কিছু জন্য বাহ এত কোড। কেন নিয়মিত ভাব প্রকাশ করবেন না এবং চাকাটি পুনরায় উদ্ভাবন করবেন না? আপনি কেবল /^class_name_you_are_searching_for$/.test(myElement.className) ব্যবহার করতে পারেন

— pqsk

1

আমি খুব দ্রুত লিখেছি। শুধু আমার নিয়মিত অভিব্যক্তিটি অতিমাত্রায় জটিল না করার জন্য এটি হবে /\s*class_name_you_are_searching_for\s*/.test(myElement.className)

— pqsk

@pqsk - আমি ভবিষ্যতে ব্যবহারের জন্য আমার নিজস্ব লাইব্রেরি লিখি। এবং এটি কেবল আমার স্ট্যাককে যুক্ত করে। অবশ্যই অন্যান্য সমাধানগুলি কাজ করবে, এটি আমার

— পছন্দের

4

classNameক্লাসের তালিকায় অন্য স্ট্রিং রয়েছে কিনা তা দেখতে আপনি নিয়মিত সূচিপত্র ফাংশনটি ব্যবহার করতে পারেন তাই এটি কেবল একটি স্ট্রিং।

— ডেভিড
সূত্র

1

classউপরের উদাহরণে শ্রেণীর জন্য পরীক্ষা সম্পর্কে কী ?

— ফেলিক্স ক্লিং

6

অভিজ্ঞতা থেকে, এই পদ্ধতিটি বেশ ঝুঁকিপূর্ণ হতে পারে: আপনি যখন ক্লাসে fooথাকা কোনও উপাদানটির উপর শ্রেণীর সন্ধান করবেন তখন এটি সত্য হবে foobar।

— জিরাাক

2

অবশ্যই, আপনি যা পরীক্ষা করছেন সে সম্পর্কে আপনার সচেতন থাকতে হবে। ফেলিক্সের কোডটি ডিলিমিটার হিসাবে স্পেস ব্যবহার করে ভাল কাজ করে।

— ডেভিড

শ্রেণীর নামের নেস্টেড উদাহরণগুলির জন্য অ্যাকাউন্টে ব্যর্থ। উদাহরণ: 'শেষ' শ্রেণীর নাম 'ফ্রন্টএন্ড' তে পাওয়া যাবে।

— অ্যান্টনি রুটলেজ

4

আমি অনেক উত্তর জানি কিন্তু এর বেশিরভাগই অতিরিক্ত ফাংশন এবং অতিরিক্ত ক্লাসের জন্য। এটি আমি ব্যক্তিগতভাবে ব্যবহার করি; কোডার অনেক ক্লিনার এবং অনেক কম লাইন!

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

— TheBlackBenzKid
সূত্র

1

এই পদ্ধতিটি এমন কোনও শ্রেণীর নামের সন্ধান করতে গিয়ে মিথ্যা ইতিবাচক প্রত্যাবর্তন করতে পারে যা আংশিকভাবে মেলে - যেমন <body class="category-page">এবং document.body.className.match('page')- মিলবে তবে pageউপাদানটির সাথে কোনও শ্রেণি সংযুক্ত নেই

— হুবলি

সমাধান করা যায় \b, উদাহরণস্বরূপ /\bpage\b/g, যেহেতু এটি রেজেক্স (নোট: ব্যবহার করতে হবে / /g)।

— অ্যান্ড্রু

2

এখানে একটি কেস-সংবেদনশীল তুচ্ছ সমাধান:

function hasClass(element, classNameToTestFor) {
    var classNames = element.className.split(' ');
    for (var i = 0; i < classNames.length; i++) {
        if (classNames[i].toLowerCase() == classNameToTestFor.toLowerCase()) {
            return true;
        }
    }
    return false;
}

— অ্যান্ডার্স ফেজেলস্টাড
সূত্র

2

যদি উপাদানের কেবলমাত্র একটি শ্রেণির নাম থাকে তবে আপনি ক্লাসের বৈশিষ্ট্যটি পেয়ে এটি দ্রুত পরীক্ষা করতে পারেন। অন্যান্য উত্তরগুলি আরও শক্তিশালী তবে এটি অবশ্যই ব্যবহারের ক্ষেত্রে রয়েছে।

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

}

— ব্র্যান্ডন ব্রুলে
সূত্র

2

আমি একটি প্রোটোটাইপ পদ্ধতি তৈরি করেছি যা classListযদি সম্ভব হয় তবে অন্যটি রিসর্ট করে indexOf:

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>

স্নিপেট প্রসারিত করুন

পরীক্ষার পৃষ্ঠা

— VSync
সূত্র

ই-ক্লাসনামের সূচকের পরিবর্তে আপনি শ্রেণি তালিকাটি ব্যবহার করতে চান এমন কোনও কারণ আছে কি? পারফের মতো দেখতে কম ভাল লাগে

— সিড

@ সিড - ভাল, পারফ অপ্রাসঙ্গিক যদি আপনি তাদের শ্রেণীর জন্য কয়েক হাজার উপাদান পরীক্ষা না করেন, (এটি সম্ভবত ভবিষ্যতে ব্রাউজারগুলিতে রিফেক্টর হবে)। এটি ব্যবহার করা আরও মার্জিত কারণ কারণ কোডটি তার কার্যকারিতা বর্ণনা করে তবে নীচের লাইনটি কোনও ব্যাপার নয়, আপনি যা চান তা করুন :)

— vsync

1

ক্লাসের নামটি ফাঁকে ফাঁকা করার জন্য ফেলিক্সের কৌশল এবং আপনি যে স্ট্রিংটির সন্ধান করছেন তা হ'ল উপাদানগুলির শ্রেণি আছে কি না তা নির্ধারণের জন্য সঠিক পন্থা।
শ্রেণি অনুসারে আলাদা আচরণ করতে, আপনি কোনও মানচিত্রের মধ্যে ফাংশন উল্লেখগুলি বা ফাংশন ব্যবহার করতে পারেন:
```
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 in fns) এর জন্য fns মানচিত্রের কীগুলির মাধ্যমে পুনরাবৃত্তি হয়।
- Fnsi এর পরে কোনও ব্রেক না থাকার ফলে যখনই কোনও ম্যাচ হয় কোডটি সম্পাদন করতে দেয় - যাতে উপাদানটি যদি ফাই, শ্রেণি 1 এবং শ্রেণী 2 থাকে তবে উভয়ই fn1 এবং fn2 কার্যকর করা হবে।
- এই পদ্ধতির সুবিধাটি হ'ল প্রতিটি শ্রেণীর জন্য কার্যকর করার কোডটি স্বেচ্ছাসেবী, যেমন স্যুইচ বিবৃতিতে রয়েছে; আপনার উদাহরণে সমস্ত কেস একই ধরণের অপারেশন করেছে তবে আগামীকাল আপনাকে প্রত্যেকটির জন্য আলাদা আলাদা জিনিস করার প্রয়োজন হতে পারে।
- লুপে কোনও ম্যাচ পাওয়া গেছে কি না তা স্থিতির পরিবর্তনশীল হয়ে আপনি ডিফল্ট কেসটি অনুকরণ করতে পারেন।

— entonio
সূত্র

1

আমি বহু শ্রেণীর তালিকার কার্যকারিতা পূর্ণ করব এবং নতুন সিনট্যাক্সটি ব্যবহার করব। এইভাবে নতুন ব্রাউজারটি নতুন বাস্তবায়ন (যা অনেক দ্রুত) ব্যবহার করবে এবং কেবল পুরানো ব্রাউজারগুলি কোড থেকে পারফরম্যান্স হিট করবে।

https://github.com/remy/polyfills/blob/master/classList.js

— এরিক ইয়াং
সূত্র

1

এটি কিছুটা বন্ধ, তবে আপনার যদি এমন ইভেন্ট থাকে যা স্যুইচ ট্রিগার করে, আপনি ক্লাস ছাড়াই করতে পারেন:

<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।

এটি কিছুটা হ্যাকি, তবে অতিরিক্ত ফাংশন বা লুপগুলি ছাড়াই দীর্ঘ সুইচগুলির জন্য কাজ করে

— আর্থার তারাসভ
সূত্র

1

কোনও উপাদানটির ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে যদি একটি নির্দিষ্ট শ্রেণি থাকে তবে দ্রুত এবং সহজ পদ্ধতির জন্য এই কোডেপ লিঙ্কটি দেখুন!

hasClass (ভ্যানিলা জেএস)

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

— Jefsama
সূত্র

1

এটি IE8 + এ সমর্থিত।

প্রথমে আমরা পরীক্ষা classListকরে দেখি যে এটি বিদ্যমান কিনা যদি আমরা সেই containsপদ্ধতিটি ব্যবহার করতে পারি যা IE10 + দ্বারা সমর্থিত। আমরা যদি আই 9 বা 8 তে থাকি তবে এটি একটি রেইজেক্স ব্যবহার করে ফিরে আসে, যা ততটা দক্ষ নয় তবে সংক্ষিপ্ত পলিফিল।

if (el.classList) {
  el.classList.contains(className);
} else {
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}

বিকল্প হিসাবে আপনি যদি বাবেলের সাথে সংকলন করছেন তবে আপনি সহজেই ব্যবহার করতে পারেন: el.classList.contains(className);

— buts
সূত্র

0

আর একবার চেষ্টা কর:

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;
};

— jimy
সূত্র

1

সীমানা শব্দটি সম্পর্কে সতর্কতা অবলম্বন করুন। এটি যেমন আপনার সাথে যেমন একটি ক্লাস থাকে foo-barএবং সন্ধান করে তবে এটি সত্যের সাথে মিলবে foo।

— ফেলিক্স ক্লিং

1

হাই জিমি, তাই আমি এই met বি মেটাচার্যাক্টারের সন্ধান করছিলাম এবং এটি কেবল [ a-zA-Z0-9_] কে শব্দের অক্ষর হিসাবে বিবেচনা করে । সুতরাং একটি বিয়োগ চর সহ একটি শ্রেণিকামের জন্য এটি কাজ করবে না ।

— স্টানো

0

আমি মনে করি যে নিখুঁত সমাধানটি এটিই হবে

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

— অভিষেক
সূত্র

8

1. "প্লেইন জাভাস্ক্রিপ্ট (jQuery নয়) ব্যবহার করে" 2. বন্ধনী ব্যবহার করুন

— এনকেমল

3 - প্যারেন্টেসিস ব্যবহার করুন

— দ্য

0

বর্তমানে কোন উপাদানটিতে '.বার' শ্রেণি রয়েছে? এখানে আরও একটি সমাধান দেওয়া হয়েছে তবে এটি আপনার উপর নির্ভর করে।

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>হয় /LI/g, <ul>= /UL/gইত্যাদি

— Thielicious
সূত্র

0

ইনলাইন এসভিজি উপাদানগুলির মধ্যে শ্রেণীর নাম সন্ধান করার চেষ্টা করা লোকদের জন্য উত্তরে কেবল যুক্ত করতে।

hasCLass()ফাংশনটি এতে পরিবর্তন করুন :

function hasClass(element, cls) {
    return (' ' + element.getAttribute('class') + ' ').indexOf(' ' + cls + ' ') > -1;
  }

classNameসম্পত্তি ব্যবহারের পরিবর্তে getAttribute()আপনার ক্লাসের নাম দখল করার জন্য পদ্ধতিটি ব্যবহার করতে হবে ।

— বেন রুডল্ফ
সূত্র

0

আমি আমার ওয়েবসাইটের জন্য এই ফাংশনগুলি তৈরি করেছি, আমি কেবল ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করি, এটি কারওর পক্ষে সহায়তা করবে। প্রথমে আমি কোনও HTML উপাদান পেতে একটি ফাংশন তৈরি করেছি:

//return an HTML element by ID, class or tag name
    var getElement = function(selector) {
        var elements = [];
        if(selector[0] == '#') {
            elements.push(document.getElementById(selector.substring(1, selector.length)));
        } else if(selector[0] == '.') {
            elements = document.getElementsByClassName(selector.substring(1, selector.length));
        } else {
            elements = document.getElementsByTagName(selector);
        }
        return elements;
    }

তারপরে যে ফাংশনটি ক্লাসটি সরিয়ে ফেলতে হবে এবং উপাদানটির নির্বাচক:

var hasClass = function(selector, _class) {
        var elements = getElement(selector);
        var contains = false;
        for (let index = 0; index < elements.length; index++) {
            const curElement = elements[index];
            if(curElement.classList.contains(_class)) {
                contains = true;
                break;
            }
        }
        return contains;
    }

এখন আপনি এটি এর মতো ব্যবহার করতে পারেন:

hasClass('body', 'gray')
hasClass('#like', 'green')
hasClass('.button', 'active')

আশা করি এটি সাহায্য করবে।

— তামাশা
সূত্র

0

টিপ: আপনার প্রকল্পগুলিতে যতটা সম্ভব jQuery এর নির্ভরতা অপসারণ করার চেষ্টা করুন - ভ্যানিলাজেএস ।

document.firstElementChildআয় <html>ট্যাগ তারপর classListঅ্যাট্রিবিউট এটা যোগ করা সব শ্রেণীর ফেরৎ।

if(document.firstElementChild.classList.contains("your-class")){
    // <html> has 'your-class'
} else {
    // <html> doesn't have 'your-class'
}

— আলিরেজা
সূত্র

-1

আমার কাছে এটি অর্জনের সবচেয়ে মার্জিত এবং দ্রুত উপায় হ'ল:

function hasClass(el,cl){
   return !!el.className && !!el.className.match(new RegExp('\\b('+cl+')\\b'));
}

— Pinonirvana
সূত্র