hasClassプレーンなol 'JavaScriptでjQueryをどのように行うのですか？例えば、
<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 ) より一般的な質問に答えるには、githubのjQueryのソースコード、またはhasClassこのソースビューアーのソースを参照してください。
rclass実際の内容は;））
\b「thatClass-anotherClass」と一致しませんか？
/[\t\r\n\f]/gです。現在のjQueryでは、正規表現がに更新されました。また/\bclass\b/、-マイナス記号の付いたクラス名では失敗する可能性があることを言及するのは良いことです（それがうまく機能することを除けば）。これが、jQueryの実装の方が優れており、信頼性が高い理由です。たとえば/\bbig\b/.test('big-text')、期待されるfalseではなくtrueを返します。
単に使用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()
使用中のクラスを格納する属性は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();
};私はシンプルで最小限のソリューション、1行のクロスブラウザーを使用しており、レガシーブラウザーでも動作します。
/\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とcontainsを操作することです。
私はそれをこのようにしました：
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...したがって、要素が必要であり、クラスのリストを確認します。クラスの1つが検索したクラスと同じ場合は、trueを返します。そうでない場合は、falseを返します。
次のようなものを使用してください：
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');myHTMLSelector.classList.indexOf('the-class')ですか？>=0最後にもやりたくないですか？
[].indexOf場合に使用する意味は何ですか？classListcontains
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);
}このアプローチについてどう思いますか？
<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プロパティを解析し（複数のクラスの場合、スペースで区切られたランダムな順序で複数のクラス名を持つ）、クラス名がその中にあるかどうかを確認する必要があると思います。それほど難しくはないが、学習目的ではないとしても、ひどく不便:)