Як робити jQuery за hasClassдопомогою простого JavaScript? Наприклад,
<body class="foo thatClass bar">Який спосіб JavaScript запитати, чи <body>є thatClass?
Відповіді:
Ви можете перевірити, чи element.classNameвідповідають /\bthatClass\b/.
\bвідповідає слово перерва.
Або ви можете використовувати власну реалізацію jQuery:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 )
Щоб відповісти на більш загальне запитання, ви можете подивитися вихідний код jQuery на github або у джерелі, hasClassзокрема в цьому переглядачі джерела .
rclassнасправді є;))
\bвідповідає "thatClass-anotherClass"?
/[\t\r\n\f]/g. Також добре згадати, що це /\bclass\b/може бути невдаче для імен класів зі -знаком мінус (крім того, що це добре працює), тому реалізація jQuery є кращою та надійнішою. Наприклад: /\bbig\b/.test('big-text')повертає істину замість очікуваної помилки.
Просто використовуйте classList.contains():
if (document.body.classList.contains('thatClass')) {
// do some stuff
}
Інші види використання 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');
Підтримка браузера:
.classListрядок, але він не розпізнає більш сучасні методи, такі як.classList.contains()
Найефективніший один лайнер, який
thisClassелемента, який має class="thisClass-suffix".function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
Атрибут, який зберігає використовувані класи, є className.
Тож ви можете сказати:
if (document.body.className.match(/\bmyclass\b/)) {
....
}
Якщо ви хочете розташування, яке показує, як jQuery робить все, я б запропонував:
matchАтрибут зручний знову! Чи справді jQuery робить щось більше, ніж можливо в JavaScript ?! Якщо ні, jQuery - це лише зайва вага скорочень.
myclass-something, як \bсірники сірники.
// 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;
};функція addClass:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};функція 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();
};Я використовую просте / мінімальне рішення, один рядок, крос-браузер, а також працює зі застарілими браузерами:
/\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.
хорошим рішенням для цього є робота з classList і містить.
я зробив це так:
... 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"
}Ця функція "hasClass" працює в IE8 +, FireFox та 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);
}Ну, всі вищезазначені відповіді є досить гарними, але ось невеличка проста функція, яку я прошив. Це працює досить добре.
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властивість (яка у випадку декількох класів матиме кілька імен класів у випадковому порядку, розділених пробілом) та перевірити, чи є в ній назва вашого класу. Не дуже складно, але все ж страшенно незручно, якщо не для навчальних цілей :)