if 문에 여러 값에 대한 클래스가 JQuery.has에 있습니다.
다음과 같은 간단한 if 문장이 있습니다.
if ($('html').hasClass('m320')) {
// do stuff
}
예상대로 됩니다.그러나 나는 더 많은 클래스를 추가하고 싶습니다.if statement수업들 중에 어떤 것이 있는지 확인하기 위해.<html>태그가 필요해요. 전부가 아니라 클래스가 한 개 이상 있을 뿐이지 그 이상이 될 수도 있어요.
저의 활용 사례는 수업이 있다는 것입니다(예:m320,m768) 다양한 뷰포트 너비에 추가되어 특정 너비(클래스)인 경우에만 특정 Jquery를 실행하고 싶습니다.
제가 지금까지 시도한 것은 다음과 같습니다.
1.
if ($('html').hasClass('m320', 'm768')) {
// do stuff
}
2.
if ($('html').hasClass('m320')) || ($('html').hasClass('m768')) {
// do stuff
}
3.
if ($('html').hasClass(['m320', 'm768'])) {
// do stuff
}
하지만 이들 중 어느 것도 작동하지 않는 것 같습니다.내가 무엇을 잘못하고 있는지 확실하지 않지만 아마도 나의 구문이나 구조일 것입니다.
당신은 사용할 수 있습니다.is()대신에hasClass():
if ($('html').is('.m320, .m768')) { ... }
두 번째 시도에서 괄호가 엉망이 되었잖아요.
var $html = $("html");
if ($html.hasClass('m320') || $html.hasClass('m768')) {
// do stuff
}
재미로 여러 클래스 이름 중 하나를 확인하는 작은 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'). 이것에 대한 메모: 주문이 중요합니다!만약 수업시간에A'가 발견될 가능성이 높으니, 먼저 나열하세요!OR 조건문은 그 중 하나가 충족되면 즉시 반환됩니다.
지금까지 최악의 성능은element.is('.class').
또한 사이버몽크의 기능과 콜자의 솔루션도 jsperf에 등재되어 있습니다.
다음은 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
}
hasClass 메서드는 클래스 이름 배열을 인수로 받아들입니다. 다음과 같은 작업을 수행할 수 있습니다.
$(document).ready(function() {
function filterFilesList() {
var rows = $('.file-row');
var checked = $("#filterControls :checkbox:checked");
if (checked.length) {
var criteriaCollection = [];
checked.each(function() {
criteriaCollection.push($(this).val());
});
rows.each(function() {
var row = $(this);
var rowMatch = row.hasClass(criteriaCollection);
if (rowMatch) {
row.show();
} else {
row.hide(200);
}
});
} else {
rows.each(function() {
$(this).show();
});
}
}
$("#filterControls :checkbox").click(filterFilesList);
filterFilesList();
});
두 클래스 모두 참석해야 할 경우입니다.또는 논리의 경우 ||를 사용합니다.
$('el').hasClass('first-class') || $('el').hasClass('second-class')
필요에 따라 자유롭게 최적화
시도해 보기:
if ($('html').hasClass('class1 class2')) {
// do stuff
}
언급URL : https://stackoverflow.com/questions/10559153/jquery-hasclass-for-multiple-values-in-an-if-statement
'programing' 카테고리의 다른 글
| $httpBackend에 있을 때와 예상할 때의 차이는 무엇입니까? (0) | 2023.10.02 |
|---|---|
| printf로 char 인쇄하기 (0) | 2023.10.01 |
| 도커 무시:파일과 도커 파일을 제외한 모든 것을 무시합니다. (0) | 2023.10.01 |
| Oracle에서 테이블 행에 대해 작성된 날짜-시간은 언제입니까? (0) | 2023.10.01 |
| 인증 유형을 표준에서 cashing_sha2_password로 변경하는 MySQL (0) | 2023.10.01 |