[jQuery] if문을 통한 class 존재 여부 확인 (hasClass)

 if문을 통한 class 존재 여부 확인 하는법

웹에서 jQuery를 통해 html의 객체를 제어하는 경우가 많습니다.

이때, 특정한 상황에서의 이벤트가 필요한 순간이 있는데요.

그때 바로 if, else 조건문을 통한 방법으로 처리해주어야 합니다.

 

다음은 class 존재 여부를 확인 하는 3가지 방법에 대해 알려드리겠습니다.

 

1. is 함수

if($("#div").hasClass("active") === true) {

// class가 존재함.

} else {

// class가 존재하지 않음	

}

2. hasClass 함수

if($("#div").hasClass("active") === true) {

// class가 존재함

} else {

// class가 존재하지않음

}

 

3 .legnth 속성 체크

if($("#div.active").length) {

// Class가 존재함.

} else {
// Class가 존재하지 않음
}

위의 3가지 방법은 div라는 id를 가지고 있는 객체에, active라는 클래스가 존재할때 이벤트를 처리하는 방법입니다.

세가지의 방법 중 편한 방법을 사용하시면 되겠습니다.

 

 

활용 예제

위의 본문에 코드를 사용할 때, if else와 같은 조건문에서 $(this) 선택자가 적용되지 않더라구요.

그래서 여러가지 적용해보다가 찾은 방법을 알려드리겠습니다.

  $('.like_btn').click(function () {
     $(this).toggleClass('on');
        if ($(this).hasClass("on")) {
            $(this).parent().addclass('active')
        } else if (!$(this).hasClass("on")) {
             $(this).parent().removeclass('active')
        }
    });
    

위의 코드는 like_btn라는 class를 가진 버튼을 클릭 이벤트에 관한 코드입니다.

1. $(this).toggleClass('on') : this인 like_btn에 'on' 클래스를 추가한다.

2. if ($(this).hasclass('on')) : this인 like_btn에 'on' 클래스가 존재 할때 동작한다.

3. $(this).parent().addclass('active') : this인 like_btn의 부모에게 'active' 라는 클래스를 추가한다.

4. else는 this인 like_btn에 'on' 클래스가 없을 때 동작하는 이벤트로, 위의 3가지 요소의 반대라고 생각하시면 됩니다.

 

혹은

    $('.like_btn').each(function(){
     if ($(this).hasClass("on")) {
            $(this).parent().addClass('active')
        }else {
          $(this).parent().removeClass('active')
        }
})

each() 함수를 통해 해당 영역에 class 여부를 확인하고 이벤트 처리해주는 방법이 있습니다.

위의 코드는 like_btn에 on 이라는 클래스가 있을 때, 부모의 요소에 active 클래스를 추가, 삭제하는 방법입니다.