Bagaimana Anda melakukan jQuery hasClassdengan JavaScript biasa? Sebagai contoh,
<body class="foo thatClass bar">Apa cara JavaScript untuk bertanya jika <body>sudah thatClass?
Jawaban:
Anda dapat memeriksa apakah element.classNamecocok /\bthatClass\b/.
\bcocok dengan istirahat kata.
Atau, Anda dapat menggunakan implementasi jQuery sendiri:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 ) Untuk menjawab pertanyaan Anda yang lebih umum, Anda dapat melihat kode sumber jQuery di github atau pada sumber untuk hasClasskhususnya di penampil sumber ini .
rclasssebenarnya;))
\bcocok dengan "thatClass-anotherClass"?
/[\t\r\n\f]/g. Juga bagus untuk menyebutkan bahwa /\bclass\b/bisa gagal untuk nama-nama kelas dengan -tanda minus (selain itu berfungsi baik), itu sebabnya implementasi jQuery lebih baik dan lebih dapat diandalkan. Misalnya: /\bbig\b/.test('big-text')mengembalikan true, bukan false yang diharapkan.
Cukup gunakan classList.contains():
if (document.body.classList.contains('thatClass')) {
// do some stuff
}Penggunaan lain dari 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');Dukungan Browser:
.classListsebagai string, tetapi tidak akan mengenali metode yang lebih modern seperti.classList.contains()
Yang paling efektif adalah liner itu
thisClasselemen yang dimiliki class="thisClass-suffix".function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}Atribut yang menyimpan kelas yang digunakan adalah className.
Jadi bisa dibilang:
if (document.body.className.match(/\bmyclass\b/)) {
....
}Jika Anda menginginkan lokasi yang menunjukkan kepada Anda bagaimana jQuery melakukan segalanya, saya sarankan:
matchAtribut datang berguna lagi! Benarkah jQuery melakukan sesuatu yang lebih dari yang dimungkinkan dalam JavaScript ?! Jika tidak, jQuery hanyalah beban singkat yang tidak perlu.
myclass-something, seperti \bcocok dengan tanda hubung.
// 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>Fungsi 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;
};fungsi addClass:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};fungsi removeClass:
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();
};Saya menggunakan solusi sederhana / minimal, satu baris, lintas browser, dan bekerja dengan browser lawas juga:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'Metode ini hebat karena tidak memerlukan polyfill dan jika Anda menggunakannyaclassList itu jauh lebih baik dalam hal kinerja. Setidaknya untuk saya.
Pembaruan: Saya membuat polyfill kecil yang merupakan solusi menyeluruh yang saya gunakan sekarang:
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;
}Untuk manipulasi kelas lainnya, lihat file lengkap di sini .
notmyClassHere?
!/myClass/.test(document.body.className)perhatikan juga !simbolnya.
thisIsmyClassHere.
solusi yang baik untuk ini adalah bekerja dengan classList dan mengandung.
saya melakukannya seperti ini:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...Jadi, Anda perlu elemen Anda dan periksa daftar kelas. Jika salah satu kelas sama dengan yang Anda cari akan mengembalikan true jika tidak, itu akan kembali salah!
Gunakan sesuatu seperti:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');myHTMLSelector.classList.indexOf('the-class')? Bukankah Anda juga ingin >=0pada akhirnya?
[].indexOfjika classListmemiliki containsmetode?
myHTMLSelector.classList.indexOf('the-class')mengembalikan kesalahan itu myHTMLSelector.classList.indexOf is not a functionkarena myHTMLSelector.classListbukan array. Tapi saya kira ketika menyebutnya menggunakan Array.prototypebeberapa konversi terjadi. Ini mungkin mendukung browser yang lebih lama, walaupun containsmemiliki dukungan yang sangat baik.
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}Fungsi 'hasClass' ini berfungsi di IE8 +, FireFox dan Chrome:
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);
}Yah semua jawaban di atas cukup bagus tapi di sini ada fungsi sederhana kecil yang saya lakukan. Ini bekerja dengan cukup baik.
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}classListpunya containsmetode?
Apa pendapat Anda tentang pendekatan ini?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );class="nothatClassIsnt"?
Inilah cara paling sederhana:
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");
}
}
}
classproperti (yang dalam hal beberapa kelas akan memiliki beberapa nama kelas dalam urutan acak yang dipisahkan oleh spasi) dan memeriksa apakah nama kelas Anda ada di dalamnya. Tidak terlalu sulit, tetapi masih sangat merepotkan jika tidak untuk tujuan pembelajaran :)