সরল জাভাস্ক্রিপ্ট সহ "hasClass" ফাংশন কী?


313

আপনি কীভাবে hasClassপ্লেইন ওল 'জাভাস্ক্রিপ্টের সাহায্যে jQuery এর করেন? উদাহরণ স্বরূপ,

<body class="foo thatClass bar">

জাভাস্ক্রিপ্ট জিজ্ঞাসা করার উপায় কি যদি <body>আছে thatClass?


আমি মনে করি আপনাকে classসম্পত্তিটি বিশ্লেষণ করতে হবে (একাধিক শ্রেণীর ক্ষেত্রে কোনও স্থানের দ্বারা এলোমেলো ক্রমে একাধিক শ্রেণীর নাম থাকবে) এবং আপনার শ্রেণীর নাম এতে আছে কিনা তা পরীক্ষা করে দেখতে হবে। মারাত্মকভাবে কঠিন নয়, তবে শেখার উদ্দেশ্যে না হলে এখনও
পেক্কা

7
আমি জানি না আমি পার্টির জন্য দেরি করেছি তবে একটি ভাল সাইট যা jQuery ফাংশনগুলিকে বিকল্প দেয় youmightnotneedjquery.com
ইথিল

উত্তর:


116

element.classNameমিলছে কিনা তা আপনি পরীক্ষা করতে পারেন /\bthatClass\b/
\bএকটি শব্দ বিরতি মেলে।

বা, আপনি jQuery এর নিজস্ব বাস্তবায়ন ব্যবহার করতে পারেন:

var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 ) 

আপনার আরও সাধারণ প্রশ্নের উত্তর দেওয়ার জন্য, আপনি গিথুবটিতে jQuery এর উত্স কোডটি দেখতে পারেন বা উত্সটিতে hasClassবিশেষত এই উত্স দর্শকের জন্য


6
JQuery বাস্তবায়নের জন্য +1 (দেখার জন্য (এটি কি সঠিক ইংরেজি?) rclassআসলে কী;))
ফেলিক্স ক্লিং

6
Wouldn't \b match "thatClass-anotherClass"?
Matthew Crumley

3
just for completeness: rclass in recent versions is "/[\n\t\r]/g" (\r added)
Felix Schwarz

4
@FelixSchwarz is right, in current jQuery the regexp was updated to /[\t\r\n\f]/g. Also it's good to mention that /\bclass\b/ can fail for classnames with - minus sign (other than that it works good) , that's why jQuery's implementation is better and more reliable. For example: /\bbig\b/.test('big-text') returns true instead of expected false.
Stano

994

Simply use classList.contains():

if (document.body.classList.contains('thatClass')) {
    // do some stuff
}

Other uses of 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');

Browser Support:

  • Chrome 8.0
  • Firefox 3.6
  • IE 10
  • Opera 11.50
  • Safari 5.1

classList Browser Support


5
This is unsupported in IE8. IE8 can retrieve .classList as a string, but it will not recognise the more modern methods such as .classList.contains()
iono

7
@iono সালে Element.classList MDN থেকে বাস্তবায়ন বিবরণ সেখানে shim যে IE8 এই আচরণ সমর্থন প্রসারিত হয় developer.mozilla.org/en-US/docs/Web/API/Element/classList
জেমস

3
আমি @ আলেকজান্ডার উইগমোরের সাথে একমত, এটি অবিশ্বাস্যভাবে সহায়ক এবং সহজ ছিল।
জ্যাক অলিভিয়ার

এটি ভোট দেয়। ক্লাসগুলি জিজ্ঞাসা করার এটি অনেক বেশি পরিচ্ছন্ন উপায়
ইউজার 2190488

@ এসএলএক্স এটি ইতিমধ্যে গ্রহণযোগ্য উত্তর হতে আপডেট করা উচিত।
উমুর কারাগেজ

35

সর্বাধিক কার্যকর একটি লাইনার

  • returns a boolean (as opposed to Orbling's answer)
  • Does not return a false positive when searching for thisClass on an element that has class="thisClass-suffix".
  • is compatible with every browser down to at least IE6

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

28

The attribute that stores the classes in use is className.

So you can say:

if (document.body.className.match(/\bmyclass\b/)) {
    ....
}

If you want a location that shows you how jQuery does everything, I would suggest:

http://code.jquery.com/jquery-1.5.js


1
Excellent. The match attribute comes handy again! Does really jQuery does something more than is possible in JavaScript?! If not, jQuery is just an unnecessary weight of shorthands.
animaacija

1
This also matches myclass-something, as \b matches hyphen.
Marc Durdin

1
@animaacija সমস্ত জাভাস্ক্রিপ্ট লাইব্রেরি / প্লাগইন মূলত জাভাস্ক্রিপ্ট শর্টহ্যান্ড কারণ সেগুলি জাভাস্ক্রিপ্ট দ্বারা নির্মিত। জিনিসটি হ'ল: শর্টহ্যান্ডগুলি সর্বদা প্রয়োজনীয়। চাকাটি পুনরায় উদ্ভাবন করবেন না।
এডউইন স্টটেলার

এটি একটি দুর্দান্ত সমাধান!
ম্যানুয়েল অ্যাব্যাসাল

28

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


4
@ গ্রেগ_ডিজেল: উত্তর হতাশ করবেন না! সাধারণ সমস্যার জন্য নতুন সমাধানগুলি স্বাগত অপেক্ষা আরও বেশি।
রাভেরেন

2
@ রাভেরেন পুরানো সমস্যার নতুন সমাধানগুলি স্বাগত জানালেও এই বিশেষ উত্তরটি নতুন কিছু দেয় না brings এটি কেবল এই প্রশ্নের সাথে শব্দ যোগ করে।
এমিল বার্গারন

1
@ রাভেরেন এটি কোনও নতুন সমাধান নয়, এটি এই উত্তরটির মতো তবে কম তথ্য সহ।
তহবিল মনিকার লসুইট

13

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

অ্যাডক্লাস ফাংশন:

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

11

আমি একটি সহজ / ন্যূনতম সমাধান, এক লাইন, ক্রস ব্রাউজার ব্যবহার করি এবং উত্তরাধিকারী ব্রাউজারগুলির সাথেও কাজ করি:

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

অন্যান্য শ্রেণীর হেরফের জন্য, সম্পূর্ণ ফাইলটি এখানে দেখুন


2
এই ক্লাসটি কি এক শ্রেণির উপর দিয়ে যাবে notmyClassHere?
Teepeemm

2
আপনি যদি জিজ্ঞাসা করতে পারেন যে আপনার শ্রেণিটি সেখানে প্রতীকটি !/myClass/.test(document.body.className)লক্ষ্য করে না !
thednp

1
আমি প্রশ্ন অবহেলা করার কথা বলছি না। আমি ভাবছি যে শ্রেণীর নাম থাকলে আপনার ফাংশনটি ভুলভাবে সত্য হবে thisIsmyClassHere
Teepeemm

1
আমি কেবল এটিই অনুমান করছিলাম যা আপনি জিজ্ঞাসা করেছেন, আপনার যা প্রয়োজন ঠিক তা বুঝতে পারেননি, তবে আপনি কি চেষ্টা করে দেখেছেন এবং এটি সত্য / মিথ্যা যেমনটি হওয়া উচিত তেমন ব্যর্থ হয়েছে?
thednp

2
এটি নিখুঁত নয় কারণ এটি সাবস্ট্রিংয়ের প্রমাণ নয়। উদাহরণস্বরূপ, যখন ডকুমেন্ট.বি.সি.ক্লাসনাম = 'মাই ক্লাস 123', তারপরে / মাইক্র্লাস / ডটকমেন্ট.বিডি.ক্লাসনেম) সত্য ফিরে আসবে ...
জিবিগনিউ ওয়াইড্রো

9

ক্লাসলিস্টের সাথে কাজ করা এবং এর জন্য এটির একটি ভাল সমাধান।

আমি এটি এরকম করেছিলাম:

... for ( var i = 0; i < container.length; i++ ) {
        if ( container[i].classList.contains('half_width') ) { ...

সুতরাং আপনার আপনার উপাদান প্রয়োজন এবং ক্লাসগুলির তালিকা চেক করুন। ক্লাসগুলির মধ্যে একটি যদি আপনি এটির মত সন্ধান করেন তবে এটি যদি সত্যই ফিরে আসে তবে তা মিথ্যাতে ফিরে আসবে!


6

এর মতো কিছু ব্যবহার করুন:

Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');

3
এটি কি সমান নয় myHTMLSelector.classList.indexOf('the-class')? আপনিও কি >=0শেষে চান না ?
Teepeemm

5
ব্যবহার করে লাভ কী হলো [].indexOfযদি classListএকটি আছে containsপদ্ধতি?
ওরিওল

@ টিদীপম নং myHTMLSelector.classList.indexOf('the-class')ত্রুটিটি ফিরিয়ে দেয় myHTMLSelector.classList.indexOf is not a functionকারণ myHTMLSelector.classListএটি অ্যারে নয়। তবে আমি অনুমান করি যখন এটি কল করার সময় Array.prototypeকিছু রূপান্তর ঘটে। এটি পুরানো ব্রাউজার সমর্থন করতে পারে, যদিও containsখুব ভাল সমর্থন রয়েছে।
এহসান 88


2

এই 'হ্যাশক্লাস' ফাংশন আইই 8+, ফায়ারফক্স এবং ক্রোমে কাজ করে:

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

1

ঠিক আছে উপরের উত্তরগুলি সমস্তই বেশ ভাল তবে এখানে আমি একটি ছোট্ট সাধারণ ফাংশন দিচ্ছি ipped এটি বেশ ভাল কাজ করে।

function hasClass(el, cn){
    var classes = el.classList;
    for(var j = 0; j < classes.length; j++){
        if(classes[j] == cn){
            return true;
        }
    }
}

3
যদি classListকোনও containsপদ্ধতি থাকে তবে পুনরাবৃত্তি করার কী দরকার ?
ওরিওল

1

আপনি এই পদ্ধতির সম্পর্কে কি মনে করেন?

<body class="thatClass anotherClass"> </body>

var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );

https://jsfiddle.net/5sv30bhe/


2
আমি মনে করি আপনি আপনার পরিবর্তনশীল নামগুলি (সক্রিয় === মাই ক্লাস?) মিশ্রণ করছেন। কিন্তু এই পদ্ধতির জন্য একটি মিথ্যা ইতিবাচক দিতে হবে না class="nothatClassIsnt"?
Teepeemm

0

এখানে সহজ উপায়:

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");
         }
    }
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.