본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - addClass(), 클래스 추가하기

by zoo10 2011. 2. 25.

.addClass() 함수는 특정한 클래스를 요소에 추가할 수 있습니다.

원문 링크 http://api.jquery.com/addClass/

.addClass( className )Returns: jQuery

  • .addClass( className )
  • className 특정 조건에 추가할 하나 이상의 클래스 명
  • .addClass( function(index, class) )
  • function(index, class) 함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있습니다. Receives the index position of the element in the set and the old class value as arguments.(누가 해석 좀 해주세요.~~ ^^;;)

가장 중요한 것은 이 함수가 클래스를 대체하는 함수가 아니라는 것입니다. 단순히 클래스를 추가하는 기능만 가지고 있습니다.

하나 이상의 클래스를 추가하려면 띄어쓰기를 사용하면 됩니다. 아래 예시를 보시죠.

$('p').addClass('myClass yourClass');

이 함수는 .removeClass()와 자주 같이 사용됩니다. 만약 클래스의 바꿔치기를 원하시면 이 두가지 함수를 아래와 같이 사용하시면 됩니다.

$('p').removeClass('myClass noClass').addClass('yourClass');

설명드리자면 myClass 와 noClass를 없앤 후에 yourClass 를 추가하는 구문이 되겠습니다.

jQuery 1.4 버젼 이후로 .addClass 는 클래스명을 반환해 주는 내부함수를 사용할 수 있게 되었습니다.

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

만일 5개의 li 가 존재한다면 이 함수는 "item-4"라는 클래스명을 반환해 주게 됩니다.

예 제  
선택자와 일치하는 요소에 "selected"라는 클래스를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
<script>$("p:last").addClass("selected");</script>

</body>
</html>

미리보기

마지막 p 태그에 "selected" 클래스가 추가되어 텍스트의 색이 변한 걸 볼 수 있습니다.

 

예 제  
선택자와 일치하는 요소에 "selected highlight"라는 2개의 클래스를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
<script>$("p:last").addClass("selected highlight");</script>

</body>
</html>

미리보기

마지막 p 태그에 "selected" 와 "highlight" 클래스 2가지가 추가되어 텍스트 색과 바탕색의 색이 변한 걸 볼 수 있습니다.

 

예 제  
함수를 사용하여 텍스트를 바꾸고 클래스를 추가 업데이트 합니다.(그런데, 소스에 에러가 있다고 나오네요.)

<!DOCTYPE html>
<html>
<head>
  <style>
    div { background: white }
    .red { background: red }
    .red.green { background: green }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  
 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the 'active' class. It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>

<script>
$('div').addClass(function(i,clas){
if(i===1) {
$('p').text('There is one green div');
clas = 'green';
}
return clas;
}); //블루블루님이 댓글로 해결해 주셨습니다. ^^
$('div').addClass(function(i,class) {
    if ( i === 1 ) {
       $('p').text('There is one green div');
        class += ' green';
    }
    
    return class;
});
</script>

</body>
</html>

미리보기

소스의 의도는 아마 2번째 div 의 바탕색이 녹색으로 되고, p 태그안의 텍스트를 변경하려는 것 같습니다. 그러나 에러 때문에 작동하지 않더군요. 해결해 주실 분 있나요?

업데이트
블루블루님께서 위 에러를 잡아주셨습니다. 소스에 남겨두었습니다. 참고하셔요. 블루블루님 감사합니다.

아~ 등호 3개 (===)가 구문 중에 있습니다. 이 연산자의 이름은 동치라고 하구요. 변수의 타입과 값이 모두 일치할 경우에만 True 입니다.

 

addClass 왠지 많이 사용할 것 같지 않으신가요?

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.