JQuery's hasClassdüz ol 'JavaScript ile nasıl? Örneğin,
<body class="foo thatClass bar">Sormak için JavaScript yolu nedir <body>vardır thatClass?
Yanıtlar:
Eşleşip element.classNameeşleşmediğini kontrol edebilirsiniz /\bthatClass\b/.
\bbir kelime sonu ile eşleşir.
Veya jQuery'nin kendi uygulamasını kullanabilirsiniz:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 ) Daha genel sorunuzu cevaplamak için , jQuery'nin github'daki kaynak koduna veya hasClassözellikle bu kaynak görüntüleyicinin kaynağına bakabilirsiniz .
rclass;);
\b"thatClass-anotherClass" maç?
/[\t\r\n\f]/g. Ayrıca eksi işareti /\bclass\b/olan sınıf isimleri için başarısız olabileceğinden (iyi çalışıyor dışında) bahsetmek iyi olur -, bu yüzden jQuery'nin uygulaması daha iyi ve daha güvenilirdir. Örneğin: /\bbig\b/.test('big-text')beklenen yanlış yerine true değerini döndürür.
Basitçe kullanın classList.contains():
if (document.body.classList.contains('thatClass')) {
// do some stuff
}Diğer kullanım alanları 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');Tarayıcı Desteği:
.classListbir dize olarak alabilirsiniz , ancak gibi daha modern yöntemleri tanımayacak.classList.contains()
En etkili tek astar
thisClassolan bir öğeyi ararken yanlış pozitif döndürmez class="thisClass-suffix".function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}Kullanılan sınıfları depolayan özniteliktir className.
Yani diyebilirsiniz:
if (document.body.className.match(/\bmyclass\b/)) {
....
}JQuery her şeyi nasıl yaptığını gösteren bir konum istiyorsanız, ben tavsiye ederim:
matchNitelik tekrar kullanışlı geliyor! Gerçekten jQuery JavaScript'te mümkün olandan daha fazlasını yapıyor mu ?! Değilse, jQuery sadece gereksiz bir steno ağırlığıdır.
myclass-somethinggibi \bmaçları tire.
// 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 işlevi:
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 işlevi:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};removeClass işlevi:
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();
};Basit / minimal bir çözüm, bir satır, çapraz tarayıcı kullanıyorum ve eski tarayıcılarla da çalışıyorum:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'Bu yöntem harika çünkü çoklu dolgu gerektirmez ve bunlarıclassList performans açısından çok daha iyidir. En azından benim için.
Güncelleme: Şu anda kullandığım çok yönlü bir çözüm olan küçük bir çoklu dolgu yaptım:
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;
}Diğer sınıf manipülasyon için komple dosyasına bakın burada .
notmyClassHeremi?
!/myClass/.test(document.body.className)fark !sembolü.
thisIsmyClassHere.
bunun için iyi bir çözüm classList ile çalışmak ve içerir.
ben böyle yaptım:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...Yani öğenize ihtiyacınız var ve sınıfların listesini kontrol edin. Sınıflardan biri aradığınız sınıfla aynıysa, değilse yanlış döndürür!
Şunun gibi bir şey kullanın:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');myHTMLSelector.classList.indexOf('the-class')mi? >=0Sonunda da istemiyor musun ?
[].indexOfEğer classListbir containsyöntemi varsa kullanmanın anlamı nedir ?
myHTMLSelector.classList.indexOf('the-class')Bu hata verir myHTMLSelector.classList.indexOf is not a function, çünkü myHTMLSelector.classListbir dizi değil. Ama sanırım Array.prototypebazı dönüşümleri kullanarak çağırırken olur. Bu contains, çok iyi bir desteğe sahip olmasına rağmen eski tarayıcıyı destekleyebilir.
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}Bu 'hasClass' işlevi IE8 +, FireFox ve Chrome'da çalışır:
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);
}Yukarıdaki cevapların hepsi oldukça iyi ama işte uyandırdığım küçük basit bir fonksiyon. Oldukça iyi çalışıyor.
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}classListBir containsyöntemi varsa yinelemenin anlamı nedir ?
Bu yaklaşım hakkında ne düşünüyorsun?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );class="nothatClassIsnt"mi?
İşte en basit yol:
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(Birden çok sınıf durumunda bir boşlukla ayrılmış rasgele sırayla birden çok sınıf adı olacak) özelliği ayrıştırmak ve sınıf adınızın içinde olup olmadığını kontrol etmek için varsayalım . Çok zor değil, ama öğrenme amaçlı değilse hala çok rahatsız edici :)