আপনি কীভাবে hasClass
প্লেইন ওল 'জাভাস্ক্রিপ্টের সাহায্যে jQuery এর করেন? উদাহরণ স্বরূপ,
<body class="foo thatClass bar">
জাভাস্ক্রিপ্ট জিজ্ঞাসা করার উপায় কি যদি <body>
আছে thatClass
?
আপনি কীভাবে hasClass
প্লেইন ওল 'জাভাস্ক্রিপ্টের সাহায্যে jQuery এর করেন? উদাহরণ স্বরূপ,
<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
match "thatClass-anotherClass"?
/[\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.
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:
.classList
as a string, but it will not recognise the more modern methods such as .classList.contains()
সর্বাধিক কার্যকর একটি লাইনার
thisClass
on an element that has class="thisClass-suffix"
.function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
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:
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.
myclass-something
, as \b
matches hyphen.
// 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;
};
অ্যাডক্লাস ফাংশন:
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"
}
এই 'হ্যাশক্লাস' ফাংশন আইই 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);
}
ঠিক আছে উপরের উত্তরগুলি সমস্তই বেশ ভাল তবে এখানে আমি একটি ছোট্ট সাধারণ ফাংশন দিচ্ছি ipped এটি বেশ ভাল কাজ করে।
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
সম্পত্তিটি বিশ্লেষণ করতে হবে (একাধিক শ্রেণীর ক্ষেত্রে কোনও স্থানের দ্বারা এলোমেলো ক্রমে একাধিক শ্রেণীর নাম থাকবে) এবং আপনার শ্রেণীর নাম এতে আছে কিনা তা পরীক্ষা করে দেখতে হবে। মারাত্মকভাবে কঠিন নয়, তবে শেখার উদ্দেশ্যে না হলে এখনও