if 문에서 여러 값에 대한 JQuery .hasClass
다음과 같은 간단한 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')이 가장 빠릅니다.
Next best bet is using elem.hasClass('classA') || elem.hasClass('classB'). A note on this one: order matters! If the class 'classA' is more likely to be found, list it first! OR condition statements return as soon as one of them is met.
The worst performance by far was using element.is('.class').
Also listed in the jsperf is CyberMonk's function, and Kolja's solution.
Here is a slight variation on answer offered by 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;
}
Allows use of same syntax as .addClass() and .removeClass(). e.g., .hasAnyClass('m320 m768') Needs bulletproofing, of course, as it assumes at least one argument.
var classes = $('html')[0].className;
if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) {
//do something
}
The hasClass method will accept an array of class names as an argument, you can do something like this:
$(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();
});
I've tested multiple classes in a parameter of hasClass method and it works as expected.
$('el').hasClass('first-class second-class');
This is in case you need both classes present. For either or logic just use ||
$('el').hasClass('first-class') || $('el').hasClass('second-class')
Feel free to optimize as needed
Try this:
if ($('html').hasClass('class1 class2')) {
// do stuff
}
참고URL : https://stackoverflow.com/questions/10559153/jquery-hasclass-for-multiple-values-in-an-if-statement
'developer tip' 카테고리의 다른 글
| Android-조각 트랜잭션이 실행되지 않는 사용자 지정 애니메이션 (0) | 2020.10.13 |
|---|---|
| C #에서 모든 #regions only (!) 축소 (Visual Studio) (0) | 2020.10.13 |
| Xcode 디버깅-이미지 표시 (0) | 2020.10.13 |
| iOS 7 이상 :보기 컨트롤러별로 상태 표시 줄 스타일 설정 (0) | 2020.10.13 |
| 방법과 선택기의 차이점은 무엇입니까? (0) | 2020.10.12 |