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

 

 

hasClass()

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

 

  예제  

 

이 예제에서 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()를 별도로 호출하여 결과를 조합하여 사용할 수 있습니다.

 

 

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

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

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