Làm thế nào để bạn làm jQuery hasClassvới JavaScript đơn giản? Ví dụ,
<body class="foo thatClass bar">Cách JavaScript để hỏi nếu <body>có thatClass?
Câu trả lời:
Bạn có thể kiểm tra xem element.classNametrận đấu /\bthatClass\b/.
\bphù hợp với một từ nghỉ.
Hoặc, bạn có thể sử dụng triển khai riêng của jQuery:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 ) Để trả lời câu hỏi chung chung hơn của bạn, bạn có thể xem mã nguồn của jQuery trên github hoặc tại nguồn hasClasscụ thể trong trình xem nguồn này .
rclassThực sự là gì ;))
\bkhớp với "thatClass-AnotherClass"?
/[\t\r\n\f]/g. Ngoài ra, thật tốt khi đề cập rằng /\bclass\b/có thể thất bại đối với các tên lớp có -dấu trừ (ngoài việc nó hoạt động tốt), đó là lý do tại sao việc triển khai của jQuery tốt hơn và đáng tin cậy hơn. Ví dụ: /\bbig\b/.test('big-text')trả về true thay vì false false.
Đơn giản chỉ cần sử dụng classList.contains():
if (document.body.classList.contains('thatClass')) {
// do some stuff
}Công dụng khác của 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');Hỗ trợ trình duyệt:
.classListdưới dạng một chuỗi, nhưng nó sẽ không nhận ra các phương thức hiện đại hơn như.classList.contains()
Một lớp lót hiệu quả nhất
thisClasstrên một yếu tố có class="thisClass-suffix".function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}Thuộc tính lưu trữ các lớp đang sử dụng là className.
Vì vậy, bạn có thể nói:
if (document.body.className.match(/\bmyclass\b/)) {
....
}Nếu bạn muốn một vị trí chỉ cho bạn cách jQuery thực hiện mọi thứ, tôi sẽ đề xuất:
matchthuộc tính trở lại tiện dụng một lần nữa! Có thực sự jQuery làm một cái gì đó nhiều hơn có thể trong JavaScript?! Nếu không, jQuery chỉ là một trọng lượng không cần thiết của tốc ký.
myclass-something, như \bphù hợp với dấu gạch nối.
// 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>Hàm 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;
};Hàm addClass:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};Hàm 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();
};Tôi cũng sử dụng một giải pháp đơn giản / tối thiểu, một dòng, trình duyệt chéo và cũng hoạt động với các trình duyệt cũ:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'Phương pháp này rất tuyệt vì không yêu cầu polyfill và nếu bạn sử dụng chúng cho classListhiệu suất tốt hơn nhiều. Ít nhất là đối với tôi.
Cập nhật: Tôi đã tạo một polyfill nhỏ xíu đó là một giải pháp toàn diện mà tôi sử dụng bây giờ:
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;
}Đối với các thao tác lớp khác, xem tập tin đầy đủ ở đây .
notmyClassHere?
!/myClass/.test(document.body.className)chú ý !biểu tượng.
thisIsmyClassHere.
một giải pháp tốt cho việc này là làm việc với classList và chứa.
tôi đã làm nó như thế này:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...Vì vậy, bạn cần yếu tố của bạn và kiểm tra danh sách các lớp. Nếu một trong các lớp giống với lớp bạn tìm kiếm, nó sẽ trả về true nếu không nó sẽ trả về false!
Sử dụng một cái gì đó như:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');myHTMLSelector.classList.indexOf('the-class')? >=0Cuối cùng bạn cũng không muốn sao?
[].indexOfnếu classListcó một containsphương pháp là gì?
myHTMLSelector.classList.indexOf('the-class')trả về lỗi đó myHTMLSelector.classList.indexOf is not a functionvì myHTMLSelector.classListkhông phải là một mảng. Nhưng tôi đoán khi gọi nó bằng cách sử dụng Array.prototypemột số chuyển đổi xảy ra. Điều này có thể hỗ trợ trình duyệt cũ hơn, mặc dù containscó hỗ trợ rất tốt.
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}Chức năng 'hasClass' này hoạt động trong IE8 +, FireFox và 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);
}Vâng tất cả các câu trả lời ở trên là khá tốt nhưng đây là một chức năng nhỏ đơn giản mà tôi đã đánh lên. Nó hoạt động khá tốt.
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}classListcó một containsphương pháp là gì?
Bạn nghĩ gì về phương pháp này?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );class="nothatClassIsnt"?
Đây là cách đơn giản nhất:
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");
}
}
}
classtính (trong trường hợp nhiều lớp sẽ có nhiều tên lớp theo thứ tự ngẫu nhiên cách nhau bởi một khoảng trắng) và kiểm tra xem tên lớp của bạn có nằm trong đó không. Không quá khó khăn, nhưng vẫn bất tiện khủng khiếp nếu không vì mục đích học tập :)