jQuery에서 요소에 클래스 추가하기
HTML 코드의
class
속성에는 공백으로 구분하여 여러 클래스를 쓸 수 있다는 점을 상기시켜 드립니다.
다음과 같은 상황을 상상해 보세요 - 기존 클래스를 지우지 않고 새로운 클래스를 추가하고 싶습니다.
이 경우, 단순히 .attr('class', 'new-class')
(attr 메서드를 사용하여)로 설정할 수 없습니다.
이렇게 하면 속성에 이미 존재하는 클래스들을 덮어쓰게 됩니다.
물론, 먼저 거기에 있는 클래스들을 읽어온 다음, 공백으로 우리의 클래스를 추가하고
속성에 모든 것을 다시 기록할 수 있지만, 더 쉬운 방법이 있습니다.
jQuery에는 이러한 작업을 위해
addClass 메서드가 마련되어 있습니다.
addClass 메서드는 다른 클래스를 덮어쓰지 않으면서 요소(또는 요소들)에 클래스를 추가할 수 있게 해줍니다.
요소에 추가하려는 클래스는 이 메서드의 매개변수로 전달됩니다.
다음 예제에는 class="www zzz"와 같은 두 개의 클래스를 가진 요소가 있습니다:
<p class="www zzz" id="test">text</p>
여기에 세 번째 클래스인 kkk를 추가할 수 있습니다.
결과적으로 속성의 내용은 class="www zzz kkk"가 됩니다:
$('#test').addClass('kkk');
HTML 코드는 다음과 같이 보이게 됩니다:
<p class="www zzz kkk" id="test">text</p>
모든 li에 test 클래스를 추가하세요.
