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. 또한 마이너스 부호가있는 /\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();
};나는 단순 / 최소 솔루션, 한 줄, 크로스 브라우저를 사용하고 레거시 브라우저에서도 작동합니다.
/\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') ) { ...따라서 요소가 필요하고 클래스 목록을 확인하십시오. 클래스 중 하나가 검색 한 클래스와 동일하면 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 functionmyHTMLSelector.classListArray.prototypecontains
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속성 을 구문 분석하고 (여러 클래스의 경우 여러 개의 클래스 이름을 공백으로 구분하여 임의의 순서로 정렬해야 함) 클래스 이름이 있는지 확인해야한다고 가정합니다. 어렵지 않지만 학습 목적이 아니라면 여전히 불편합니다 :)