[jQuery] 클래스 존재 여부 확인 (hasClass), 여러 클래스 확인

 

 

hasClass()

jQuery의 hasClass() 메소드를 이용하여 특정 클래스가 존재하는지 확인할 수 있습니다.

 

  예제  

 

<div id='myDiv' class="my1 my2"></div>

.my1 {
  background-color: yellow;
}

const hasMy1 = $('#myDiv').hasClass('my1'); // true
const hasMy2 = $('#myDiv').hasClass('my2'); // true
const hasMy3 = $('#myDiv').hasClass('my3'); // false
const hasMy12 = $('#myDiv').hasClass('my1 my2'); // true
const hasMy21 = $('#myDiv').hasClass('my2 my1'); // false
const hasMy23 = $('#myDiv').hasClass('my2 my3'); // false

document.write(hasMy1);
document.write('<br>');
document.write(hasMy2);
document.write('<br>');
document.write(hasMy3);
document.write('<br>');
document.write(hasMy12);
document.write('<br>');
document.write(hasMy21);
document.write('<br>');
document.write(hasMy23);

이 예제에서 myDiv는 my1, my2 클래스를 가지고 있습니다.

hasClass() 메소드를 사용해서 myDiv가 어떤 클래스를 가지고 있는지 테스트하였습니다.

 

$('#myDiv').hasClass('my1'); // true

myDiv가 my1 클래스를 가지고 있으므로, true입니다.

$('#myDiv').hasClass('my2'); // true

myDiv가 my2 클래스를 가지고 있으므로, true입니다.

$('#myDiv').hasClass('my3'); // false

myDiv가 my3 클래스를 가지고 있지 않으므로, false입니다.

$('#myDiv').hasClass('my1 my2'); // true

myDiv가  'my1 my2' 클래스를 가지고 있으므로 true입니다.

$('#myDiv').hasClass('my2 my1'); // false

hasClass는 파라미터로 입력받는 값을 하나의 문자열로 인식합니다.

이번 예제에서는 정확히 'my2 my1'이 있는지 찾습니다.

myDiv가 my1과 my2 클래스를 가지고 있지만, 

'my1 my2'의 순서로 가지므로, 

이 테스트 결과는 false입니다.

$('#myDiv').hasClass('my2 my3'); // false

myDiv는 my3 클래스를 가지고 있지 않으므로 false입니다.

 

 

여러 클래스 존재 여부 확인하기

여러 클래스를 가지고 있는지 체크하는 방법은?

위 예제에서 hasClass()는 파라미터로 입력받은 문자열로 class를 체크하였기 때문에

클래스의 순서가 다르거나,

여러 개의 클래스 중 일부가 존재하는지 체크하기는 어렵습니다.

 

여러 개의 클래스 중 일부 클래스의 존재 여부를 체크할 때는

hasClass()를 별도로 호출하여 결과를 조합하여 사용할 수 있습니다.

 

<div id='myDiv' class="my1 my2 my3"></div>

.my1 {
  background-color: yellow;
}

 

const hasMy1 = $('#myDiv').hasClass('my1'); // true
const hasMy3 = $('#myDiv').hasClass('my2'); // true

// my1클래스 존재여부, my3클래스 존재 여부를 조합
const hasMy13 = hasMy1 && hasMy3; // true

document.write(hasMy13);

 

이 예제에서 myDiv는 'my1 my2 my3' 클래스를 가지고 있습니다.

myDiv가 my1과 my3를 가지고 있는지 체크하기 위해,

hasClass('my1')과 hasClass('my3')의 결과를 조합하였습니다.