[jQuery(제이쿼리)] Object의 특정 클래스(Class) 포함 여부 확인

클래스(Class) 포함 여부 확인

• jQuery를 통해 Javascript 코드 상에 HTML 객체(Object)를 제어하는 경우가 많이 있습니다.
• 이 때에 객체의 특정 class 값을 이용하여 다수의 객체에 동시 접근하여 제어를 하거나 한 번에 동일한 CSS를 적용하는 등 다양한 용도로 사용할 수 있습니다.

html 예제

• 아래의 div HTML 객체는 3가지의 class 속성 값을 가지고 있습니다.

<div id="div_test" class="milk apple house">
...
</div> 

hasClass 함수 사용

• ID가 div_test 인 객체가 class apple 을 가지고 있는지 체크합니다.
• hassClass 는 해당 객체가 파라메터로 들어온 속성 값을 가지고 있는 경우 true를 반환합니다.
• 이 함수는 JQuery 1.2 버전에서 추가되었습니다.

if($("#div_test").hasClass("apple") === true) {
    // 속성값이 존재함.
}

is 함수 사용

• is 함수를 통해 특정 class를 포함하고 있는지 체크합니다.
• is 함수에는 class 외에 id, name 등도 사용 가능.

if($("#div_test").is(".apple") === true) {
    // 속성값이 존재함.
}

length 속성 체크

• length 값이 있는지 여부를 체크하여 class 속성이 존재하는지 확인할 수 있습니다.
• apple 클래스 속성 자체가 존재한다면 length 길이가 1이 됩니다. 존재하지 않는다면 length 길이는 0이 됩니다.

if($("#div_test.apple").length) {
    // 속성값이 존재함.
}

추천 함수

• 상황에 따라 사용하면 되겠지만 보통 hasClass 를 많이 사용한다 합니다.
• hasClass 는 함수 명도 직관적입니다.