다음과 같은 간단한 if 문이 있습니다.
if ($('html').hasClass('m320')) {
// do stuff
}
이것은 예상대로 작동합니다. 그러나 태그 if statement에 클래스가 있는지 확인 하기 위해 에 클래스를 더 추가하고 싶습니다 <html>. 모두가 아니라 적어도 하나의 클래스가 있어야하지만 더 많을 수 있도록 필요합니다.
내 유스 케이스는 I (예 : 클래스를 가지고있다 m320, m768나는 단지 그 특정 폭 (클래스)의 경우 특정 jQuery를 실행할 수 있도록 다양한 뷰포트의 폭에 대한 추가 참조).
지금까지 시도한 내용은 다음과 같습니다.
1.
if ($('html').hasClass('m320', 'm768')) {
// do stuff
}
2.
if ($('html').hasClass('m320')) || ($('html').hasClass('m768')) {
// do stuff
}
삼.
if ($('html').hasClass(['m320', 'm768'])) {
// do stuff
}
이들 중 어느 것도 작동하지 않는 것 같습니다. 내가 뭘 잘못하고 있는지 확실하지 않지만 구문이나 구조 일 가능성이 큽니다.
답변
두 번째 시도에서 괄호를 엉망으로 만들었습니다.
var $html = $("html");
if ($html.hasClass('m320') || $html.hasClass('m768')) {
// do stuff
}
답변
is()대신 사용할 수 있습니다 hasClass().
if ($('html').is('.m320, .m768')) { ... }
답변
재미를 위해 여러 클래스 이름 중 하나를 확인하는 약간의 jQuery 애드온 메서드를 작성했습니다.
$.fn.hasAnyClass = function() {
for (var i = 0; i < arguments.length; i++) {
if (this.hasClass(arguments[i])) {
return true;
}
}
return false;
}
그런 다음 귀하의 예에서 다음을 사용할 수 있습니다.
if ($('html').hasAnyClass('m320', 'm768')) {
// do stuff
}
원하는만큼 클래스 이름을 전달할 수 있습니다.
다음은 공백으로 구분 된 여러 클래스 이름을 전달할 수있는 향상된 버전입니다.
$.fn.hasAnyClass = function() {
for (var i = 0; i < arguments.length; i++) {
var classes = arguments[i].split(" ");
for (var j = 0; j < classes.length; j++) {
if (this.hasClass(classes[j])) {
return true;
}
}
}
return false;
}
if ($('html').hasAnyClass('m320 m768')) {
// do stuff
}
작업 데모 : http://jsfiddle.net/jfriend00/uvtSA/
답변
이것은 또 다른 해결책이 될 수 있습니다.
if ($('html').attr('class').match(/m320|m768/)) {
// do stuff
}
jsperf.com 에 따르면 매우 빠릅니다.
답변
이 모든 다른 옵션으로 다른 성능 측면에 대해 궁금해하는 사람을 위해 여기에 jsperf 케이스를 만들었습니다. jsperf
요컨대, 사용 element.hasClass('class')이 가장 빠릅니다.
차선책은 elem.hasClass('classA') || elem.hasClass('classB'). 이것에 대한 참고 사항 : 주문이 중요합니다! 클래스 ‘classA’가 발견 될 가능성이 더 높으면 먼저 나열하십시오! OR 조건문 중 하나가 충족되는 즉시 반환됩니다.
지금까지 최악의 성능은 element.is('.class').
jsperf에는 CyberMonk 의 기능 과 Kolja의 솔루션 도 나열되어 있습니다 .
답변
다음은 jfriend00이 제공하는 답변에 대한 약간의 변형입니다.
$.fn.hasAnyClass = function() {
var classes = arguments[0].split(" ");
for (var i = 0; i < classes.length; i++) {
if (this.hasClass(classes[i])) {
return true;
}
}
return false;
}
.addClass () 및 .removeClass ()와 동일한 구문을 사용할 수 있습니다. 예를 들어, .hasAnyClass('m320 m768')
적어도 하나의 논쟁을 가정하므로 방탄이 필요합니다.
답변
var classes = $('html')[0].className;
if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) {
//do something
}
