[jQuery] jQuery 요소에 클래스(class) 추가 및 삭제하기

요소에 클래스(class) 추가하기

요소에 클래스를 추가할때는 jQuery의 addClass() 메서드를 사용합니다. 다음과 같이 클래스를 추가할 요소를 선택자로 지정한 이후 추가할 클래스 값을 매개변수로 지정하여 추가합니다.

<script>
     $(document).ready(function(){
           $('h1').addClass('h1Class');
     });
</script>

h1 태그에 클래스가 추가된 것을 알 수 있습니다.

클래스 한꺼번에 여러개 추가하기

클래스를 한꺼번에 여러개 추가하고 싶은 경우에는 클래스 문자열 배열을 addClass() 메서드의 매개변수로 넘겨 사용합니다.

<script>
     $(document).ready(function(){
           $('h1').addClass(['h1Class','h1Class2']);
     });
</script>

클래스가 두 개 추가됐습니다.

여러개의 요소 순서에 맞게 클래스 추가하기

다음과 같이 콜백함수 형태로 addClass() 메서드를 사용하여 클래스를 추가할 수 있습니다. 콜백 함수를 사용하면 위 예제와 같이 여러 요소에 클래스를 한꺼번에 추가할 때 index값을 인자로 받게 되는데, 이 index 값을 이용할 수 있습니다.

<script>
     $(document).ready(function(){
           $('h1').addClass(function(index){
                return 'class_' + index;
           });
     });
</script>

class_ 뒤에 콜백함수가 실행될 때 받은 index 값을 추가로 붙여주었습니다.

요소의 클래스(class) 제거하기

클래스를 제거할 때는 반대로 removeClass() 메서드를 사용합니다.

h1 요소의 targetClass 값을 지웠습니다.

<script>
    $(document).ready(function () {
        $('h1').removeClass('targetClass');
    });
</script>

클래스가 지워진 것을 알 수 있습니다. 다만 속성 자체는 남아있는데, 속성명만 남아있어도 큰 의미는 없지만 찝찝할수는 있습니다.

class 속성 자체를 제거하기

만약 원하는 class만 제거하는 것이 아닌 class 속성 자체를 없애버리고 싶다면 removeAttr() 메서드를 사용합니다.

<script>
    $(document).ready(function () {
        $('h1').removeAttr('class');
    });
</script>

class 속성 자체가 깔끔하게 제거되었습니다.