[jQuery] Object의 특정 클래스 포함여부 확인/엘리먼트의 객체 존재여부 체크 - hasClass, is 함수, length 속성

특정 객체(Object)가 특정 클래스 속성 값을 가지고 있는지 알아내는 다양한 방법

 

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

1. hasClass 함수

if($("#div_test").hasClass("apple") === true) {

// 속성값 존재시 구문

}

if( jQuery('body').hasClass('page-id-552') == true ) {

jQuery('input.pf_search').focus();

};

→ ID가 div_test인 객체가 class apple 을 가지고 있는지 체크. hasClass 는 해당 객체가 파라메터로 들어온 속성값을 가지고 있는 경우 true를 반환.

2. is 함수

if($("#div_test").is(".apple") === true) {

// 속성값 존재시 구문

}

→ is 함수를 통해 특정 class를 포함하고 있는지 체크. is 함수에는 class 외에 id, name 등도 사용 가능하므로 반드시 클래스 이름 앞에 . 을 찍어서 클래스 속성임을 명시.

3. length 속성

if($("#div_test.apple").length) {

// 속성값 존재시 구문

}

→ apple 클래스 속성 존재시 length 길이는 1이 되며, 미존재시 0이 됨. length 값이 있는지 여부를 체크하여 class 속성이 존재하는지 확인할 수 있음.

if ($("#id").length > 0) {

//do something

};

→ length 특성 사용시 존재하는 객체의 갯수를 반환하고 존재하지 않으면 0를 반환, 즉 length가 1 이상일 경우 객체가 존재함을, 0일 경우 존재하지 않음을 의미

가독성, 성능(속도), 서비스 부하 등을 고려, hasClass를 사용하는 것이 좋음

※ 출처 : 이러쿵저러쿵 - [JQuery] Object의 특정 클래스(Class) 포함 여부를 확인하는 다양한 방법. : http://ooz.co.kr/245