[jQuery] class 찾기

[jQuery] class 찾기

1. hasClass()
2. is()
3. length

 

<div class="wrap">
    <div class="apple">apple</div>
    <div class="banana">banana</div>
    <div class="orange">orange</div>
</div>

 

1.hasClass()

선택자 태그에 해당 조건이 class 이여야 한다.

태그는 안되는 것 같다.

// jQuery
$('.wrap > div').each(function() {
    if($(this).hasClass('apple')) {
        // true
        $(this).css({color: 'red'});
    } else {
        // false
        $(this).css({color: 'yellow'});
    }
})

 

2.is()

특정 클래스를 포함하고 있는지,

class외에 id, name 등도 사용가능하다. 클래스 이름 앞에 .을 찍어서 클래스 속성임을 명시해주어야 한다.

// jQuery
$('.wrap > div').each(function() {
    if($(this).is('.apple')) {
        // true
        $(this).css({color: 'red'});
    } else {
        // false
        $(this).css({color: 'yellow'});
    }
})

 

3.length

속성이 존재한다면 length는 1이 된다.(true)

존재하지 않는다면 0. (false)

length를 통해 class 속성이 존재하는지 알 수 있다.

// jQuery
$('.wrap > div').each(function() {
    if($('div.apple').length) {
        // div 모두 color red
        $(this).css({color: 'red'});
    } else {
        // 나머지 div는 yellow가 안된다.
        $(this).css({color: 'yellow'});
    }
})

 

클래스 찾는 방법 3가지 중 원하는 방향에 맞게 골라서 사용하는 것이 좋을 것 같다.

 

 

---

 

Reference

Object의 특정 클래스(Class) 포함 여부를 확인하는 다양한 방법.